zoukankan      html  css  js  c++  java
  • 18、Anumation动画

    一、Animation

    (一)运动原理

    利用定时器,改变对象的属性,从而改变样式,产生动画效果

    (二)动画分类

    1、匀速运动 ==> 速度保持不变的运动
     1 案例:飞翔的小鸟
     2 //(二) 匀速动画
     3             //1.初始化速度变量
     4             //2.开启定时器
     5             //(1)获取当前值
     6             //(2)改变当前值:当前值+速度
     7             //(3)将改变后的值赋值给元素作为样式
     8             //(4)当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。(这一步应该在赋值给样式之前)
     9 //1.获取元素及初始化速度变量
    10 let bird = document.querySelector('img');
    11 let speed = 7;
    12 //2.设置定时器
    13 let timer = setInterval(()=>{
    14     //2.1 获取元素当前位置
    15     let left = bird.offsetLeft;
    16     //2.3 边界处理
    17     if(left >= window.innerWidth - bird.offsetWidth){
    18         left = window.innerWidth - bird.offsetWidth -speed;
    19         clearInterval(timer);
    20     }
    21     //2.2 将当前位置+速度变量值,更新赋值给当前元素的位置样式
    22     bird.style.left = left + speed + 'px';
    23 },20);
    2、加速运动 ==> 速度不断增加的运动
     1 ocument.addEventListener("DOMContentLoaded", function(){
     2             var bird = document.querySelector("#bird");
     3             //一.动画
     4             //利用定时器,改变对象的属性,从而改变样式,产生动画的效果
     5             //(二) 加速动画
     6             //1.初始化速度变量
     7             //2.开启定时器
     8             //(1)获取当前值
     9             //(2)改变当前值:当前值+速度
    10             //(3)速度不断增加
    11             //(3)将改变后的值赋值给元素作为样式
    12             //(4)当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。(这一步应该在赋值给样式之前)
    13             var speed = 5;
    14             var timer = setInterval(function(){
    15                 var x = bird.offsetLeft;
    16                 x +=  speed;
    17                 speed += 0.5;
    18                 if(x > window.innerWidth - bird.offsetWidth){
    19                     clearInterval(timer);
    20                     x = window.innerWidth - bird.offsetWidth;
    21                 }
    22                 bird.style.left = x + 'px';
    23             }, 30)
    24 25         })
    3、减速运动 ==> 速度不断减小的运动
     1 <script>
     2         // (三) 减速动画
     3         //1.初始化速度变量
     4         //2.开启定时器
     5         //(1)获取当前值
     6         //(2)改变当前值:当前值+速度
     7         //(3)速度不断减小
     8         //(3)将改变后的值赋值给元素的样式
     9         //(4)当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。这一步应该在赋值给样式之前
    10         //(5)当速度小于0时,清除定时器。写在速度自减下面
    11         document.addEventListener("DOMContentLoaded", function(){
    12             var car = document.querySelector("#car");
    13             var speed = 50;
    14             var timer = setInterval(function(){
    15                 var x = car.offsetLeft;
    16                 x += speed;
    17                 speed -= 1;
    18                 if(speed < 0){
    19                     clearInterval(timer);
    20                 }
    21                 car.style.left = x + 'px';
    22             }, 30)
    23         })
    24     </script>
    4、抛物线运动 ==> 水平方向速度不断减小,垂直方向速度不断增加
    
    
     1  <script type="text/javascript">           document.addEventListener("DOMContentLoaded",function(){
     2                 // (四)抛物线运动
     3                 //1.初始化速度变量(水平、垂直)
     4                 //2.开启定时器
     5                 //(1)获取当前值(水平、垂直)
     6                 //(2)改变当前值:当前值+速度
     7                 //(3)速度不断减小(垂直方向的速度)
     8                 //(3)将改变后的值赋值给元素的样式
     9                 //(4)当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。这一步应该在赋值给样式之前
    10                 var rg = document.querySelector(".rg");
    11                 var xspeed1 = 7;
    12                 var yspeed1 = 13;
    13                 var timer = setInterval(function(){
    14                     var x = rg.offsetLeft;
    15                     var y = rg.offsetTop;
    16                     x += xspeed1;
    17                     y -= yspeed1;
    18                     yspeed1 -= 0.2;
    19                     if(y > window.innerHeight - rg.offsetHeight){
    20                         // y = window.innerHeight - rg.offsetHeight;
    21                         xspeed1 *= -1;
    22                         yspeed1 = 13;
    23                         // clearInterval(timer);
    24                     }
    25                     rg.style.left = x + "px";
    26                     rg.style.top = y + "px";
    27                     
    28                 },30)
    29             })
    30         </script>
    31  
    5、缓冲运动 ==> 一开始速度很快,然后慢下来,直到停止

    /
     1 /关键:动态计算速度(目标值-当前值有关)
     2         //1.开启定时器
     3         //(1)获取当前值
     4         //(2)获取当前速度(目标值-当前值).
     5         //     * 当速度大于0时,Math.ceil()
     6         //     * 当速度小于0时,Math.floor()
     7         //(3)改变当前值:当前值+速度
     8         //(3)将改变后的值赋值给元素的样式
     9         //(4)当改变后的值等于目标值,清除定时器
    10         // * 若事件里面开启定时器,记得开启定时器先清除定时器
    11         document.addEventListener("DOMContentLoaded", function(){
    12             var totop = document.querySelector("#totop");
    13             totop.onclick = function(){
    14                 clearInterval(totop.timer);
    15                 totop.timer = setInterval(function(){
    16                     var y = window.scrollY;
    17                     var speed = Math.floor((0-y)/10);
    18                     y += speed;
    19                     window.scrollTo(0,y);
    20                     if(y == 0){
    21                         clearInterval(totop.timer);
    22                     }
    23                 }, 50)
    24             }
    25             
    26         })

    (三)动画的封装

    
    
     1 // 缓冲动画
     2 //1.开启定时器
     3 //(1)获取当前值
     4 //(2)获取当前速度(目标值-当前值).
     5 //     * 当速度大于0时,Math.ceil()
     6 //     * 当速度小于0时,Math.floor()
     7 //(3)改变当前值:当前值+速度
     8 //(3)将改变后的值赋值给元素的样式
     9 //(4)当改变后的值等于目标值,清除定时器
    10 //备注: 事件开启定时器之前,一定要记得先清除已存在的定时器。
    11 function animation(ele,attr,target,time){
    12     clearInterval(ele.timer);
    13     ele.timer = setInterval(function(){
    14         var current = window.getComputedStyle(ele)[attr];//200px   /[a-z]+/
    15         var unit = current.match(/[a-z]+$/);//提取单位
    16         unit = unit? unit[0] : "";
    17         current = parseInt(current);//只获取数值
    18         var speed = (target-current)/10;
    19         if(speed > 0){
    20             speed = Math.ceil(speed);
    21         }else if(speed < 0){
    22             speed = Math.floor(speed);
    23         }
    24         current += speed;
    25         ele.style[attr] = current + unit;
    26         if(current == target){
    27             clearInterval(ele.timer);
    28         }
    29     }, time)
    30 }
    31
  • 相关阅读:
    Java8 Stream Function
    PLINQ (C#/.Net 4.5.1) vs Stream (JDK/Java 8) Performance
    罗素 尊重 《事实》
    小品 《研发的一天》
    Java8 λ表达式 stream group by max then Option then PlainObject
    这人好像一条狗啊。什么是共识?
    TOGAF TheOpenGroup引领开发厂商中立的开放技术标准和认证
    OpenMP vs. MPI
    BPMN2 online draw tools 在线作图工具
    DecisionCamp 2019, Decision Manager, AI, and the Future
  • 原文地址:https://www.cnblogs.com/wulongke/p/10493356.html
Copyright © 2011-2022 走看看