06-动画封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            margin: 0;
            padding: 5px;
            height: 200px;
            background-color: #ddd;
            position: relative;
        }
        button {
            margin: 5px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box1">
    <button>运动到200</button>
    <button>运动到400</button>
    <div class="box2"></div>
</div>

<script>

    var btnArr = document.getElementsByTagName("button");
    var box2 = document.getElementsByClassName("box2")[0];

    var timer = null;

    //绑定事件
    btnArr[0].onclick = function () {
//        timer = setInterval(function () {
//            //盒子自身的位置+步长
//            box2.style.left = box2.offsetLeft + 10 + "px";
//            //如果停止盒子?清除定时器
//            if(box2.offsetLeft === 200){
//                clearInterval(timer);
//            }
//        },30);
        animate(200);
    }

    btnArr[1].onclick = function () {
//        timer = setInterval(function () {
//            //盒子自身的位置+步长
//            box2.style.left = box2.offsetLeft + 10 + "px";
//            //如果停止盒子?清除定时器
//            if(box2.offsetLeft === 400){
//                clearInterval(timer);
//            }
//        },30);
        animate(400);
    }

    function animate(target){
        timer = setInterval(function () {
            //盒子自身的位置+步长
            box2.style.left = box2.offsetLeft + 10 + "px";
            //如果停止盒子?清除定时器
            if(box2.offsetLeft === target){
//                clearInterval(timer);
            }
        },30);
    }

</script>
</body>
</html>

  07-动画封装(去除bug版)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            margin: 0;
            padding: 5px;
            height: 200px;
            background-color: #ddd;
            position: relative;
        }
        button {
            margin: 5px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 400px;
        }
    </style>
</head>
<body>
<div class="box1">
    <button>运动到200</button>
    <button>运动到400</button>
    <div class="box2"></div>
</div>

<script>

    var btnArr = document.getElementsByTagName("button");
    var box2 = document.getElementsByClassName("box2")[0];

    var timer = null;

    //绑定事件
    btnArr[0].onclick = function () {
        animate(200);
    }

    btnArr[1].onclick = function () {
        animate(400);
    }

    function animate(target){
        //BUG1:点击多次以后,越来越快:每次只能开一个定时器。(执行定时器前面,先清楚定时器)
        //要用定时器,先清定时器。
        clearInterval(timer);
        //BUG2:无法返回。 原因就是步长不能为恒定值。
        // 传递的目标值如果比当前值大,那么步长为+10;
        // 传递的目标值如果比当前值小,那么步长为-10;
        var speed = target>box2.offsetLeft ? 10:-10;
        timer = setInterval(function () {
            //BUG3:二次点击不停止问题。
            //如果当前值===目标值,那么先判断之间的距离还有多少,如果小于步长,那么就别走了,马上清除定时器
            var val = target - box2.offsetLeft;
            //盒子自身的位置+步长
            box2.style.left = box2.offsetLeft + speed + "px";
            //如果停止盒子?清除定时器
            if(Math.abs(val)<Math.abs(speed)){
                box2.style.left = target+ "px";
                clearInterval(timer);
            }
        },30);
    }

</script>
</body>
</html>
时间: 2024-11-05 18:48:14

06-动画封装的相关文章

iOS_SN_push/pop转场动画封装和一般动画封装

封装类中的方法: 1 #import <Foundation/Foundation.h> 2 3 #import <UIKit/UIKit.h> 4 5 6 7 8 9 @interface AnimationEffect : NSObject 10 11 12 13 14 15 /** 16 17 * push/pop转场动画封装 18 19 * 20 21 * @param type 动画类型 22 23 * @param subType 动画子类型 24 25 * @para

Vue的动画封装

问题:如果在slot标签上使用v-show,程序功能是无法实现的,必须改成v-if. 原因:slot实际是一个抽象元素,有点类似template,本质并不是一个元素. 而v-show是通过控制元素的display来进行显示和隐藏的,slot本身不是元素,所以压根就不会有display这个css属性 所以,slot显示隐藏,要使用v-if. css动画在<style>中定义,js动画在@before-enter="handleBeforEnter"中定义 步骤: 1.定义一个

缓动动画封装详细讲解

---来自一个前端妹子 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 8 <!-- 9 先快后慢 10 一开始的步子要迈的大,后面的步子要小 11 12 步子要越来越小 13 14 被除数 / 10 ,被除数的值越大,结果就越大,被除数越小.值就越小

UI基础--动画(缩放动画, 渐变动画, 左右振动, 移动动画, 组合动画)(封装好)

创建一个CAAnimation的类别 CAAnimation+HCAnimation .h #import <QuartzCore/QuartzCore.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, Axis) { AxisX = 0, ///< x轴 AxisY, ///< y轴 AxisZ ///< z轴 }; typedef NS_ENUM(NSInteger, ShakeDerection) {

基于CAShapeLayer以及UIBezierPath的语音输入效果动画封装

详情地址 嗯,主要是在简书上写,大家可以关注我的简书,如果有什么更好的建议也可以评论,探讨,加以斧正.

iOS引导页动画(封装好)

//直接上代码,在外面只要调用,传入图片数组即可. // Created by 刘志武 on 2016/12/3. // Copyright ? 2016年 zhiwuLiu. All rights reserved. // #import "LaunchView.h" #define L_Base_Tag 10000 #define L_Rotate_Rate 1 #define L_SCREEN_WIDHT [UIScreen mainScreen].bounds.size.wid

动画封装(最终版)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box1 { margin: 0; padding: 5px; height: 300px; background-color: #ddd; position: relative; } button { mar

03 canvas帧动画封装案例

sprite.js /** * Created by suxiaoxia on 2017/7/15. */ function sprite(option) { this._init(option); } sprite.prototype = { /*初始化*/ _init:function (option) { this.x = option.x || 0; this.y = option.y || 0; this.w = option.w || 40; this.h = option.h ||

JS——缓慢动画封装案例

手风琴 1.排他思想 2.ul宽度需要大一点,防止li撑开跑下去 3.一个变大其他所有变小,变小不能太小,不然会出现空白 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } div { width

iOS核心动画

iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单: CALayer CALayer简介 CAL