资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS实现css属性动画效果

JS实现css属性动画效果

LoftySoul / 2922人阅读

摘要：代码属性运动框架高动画宽动画透明度动画高宽透明度链式动画高宽透明度同时动画引入的代码运动框架运动标杆假设所有运动都达到了目标值去当前的值获取小数四舍五入获取整数算速度检测属性动画是否全部达到目标值如果不是所有的动画都达到目标值，标杆

html代码 
  2.     
  3.         
  4.         css属性运动框架
  5.  
  6.  
  7.  
  8.     
  9.     
  10.         
    •             
    • 高动画
    •             
    • 宽动画
    •             
    • 透明度动画
    •             
    • 高宽透明度链式动画
    •             
    • 高宽透明度同时动画
    •         
  11.
引入的JS代码,运动框架move.js 
</>code
  1. //运动
  2. //startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
  3. function startMove(obj,json,fn) {
  4.         clearInterval(obj.timer);
  5.         obj.timer = setInterval(function() {
  6.             var flag=true;//标杆,假设所有运动都达到了目标值
  7.                 for(var attr in json)
  8.             {
  9.                     //1.去当前的值
  10.                     var icur = 0;
  11.                     if(attr == "opacity") {
  12.                         icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat获取小数.Math.round四舍五入
  13.                     } else {
  14.                         icur = parseInt(getStyle(obj, attr)); //parseInt获取整数
  15.                     }
  16.                     //2.算速度
  17.                     var speed = (json[attr] - icur) / 8;
  18.                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  19.                     //3.检测属性动画是否全部达到目标值
  20.                     if(icur !== json[attr]) 
  21.                     {
  22.                         flag=false;//如果不是所有的动画都达到目标值，标杆设为false
  23.                     }        
  24.                     if(attr == "opacity") 
  25.                     {
  26.                             obj.style.filter = "alpha(opacity:" + (icur + speed) + ")";
  27.                             obj.style.opacity = (icur + speed) / 100;
  28.                         }
  29.                     else 
  30.                     {
  31.                             obj.style[attr] = icur + speed + "px";
  32.                     }
  33.                 }
  34.                 //在动画结束的时候检测是否有回调函数,如果检测到有回调函数，执行
  35.                     if(flag)
  36.                     {
  37.                         clearInterval(obj.timer);
  38.                         if(fn)
  39.                         {
  40.                             fn();
  41.                         }
  42.                     }
  43.                 }, 30)
  44.             }
  45.      //获取对象属性
  46.     function getStyle(obj,attr){
  47.         if(obj.currentStyle){
  48.             return obj.currentStyle[attr];//IE
  49.         }
  50.         else{
  51.             return getComputedStyle(obj,false)[attr];//火狐 chrome
  52.         }
  53.     }
GPU云服务器 云服务器 js动画效果 js 漂浮动画效果 js 消失动画效果 js动画效果瀑布

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89621.html

相关文章

  • JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要：贝塞尔曲线贝塞尔曲线是应用于二维图形应用程序的数学曲线。通过调整控制点，贝塞尔曲线的形状会发生变化。让我们看看贝塞尔曲线的工作原理。贝塞尔曲线需要四个值，或者更准确地说它需要两对数字。每对描述立方贝塞尔曲线控制点的和坐标。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 13 篇。 如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：...

    darcrand 评论0 收藏0

  • [练习]利用CSS steps 实现逐帧动画

    摘要：网页逐帧动画的实现方式网页中的逐帧动画，大致可分为两大类的实现方式，分别是使用控制，和单纯使用实现，两者的优劣总体概括来说就是动画可控性更强，但开销大，实现复杂。 网页逐帧动画的实现方式 网页中的逐帧动画，大致可分为两大类的实现方式， 分别是使用JS控制，和单纯使用CSS实现，两者的优劣总体概括来说就是： JS动画可控性更强，但开销大，实现复杂。 CSS动画实现相对JS更简单。常见的网...

    RiverLi 评论0 收藏0

  • 两种方案开发小程序动画

    摘要：通过这种方法产生的动画，无法按照原有轨迹收回，所以在事件之后设置了定时器，定义在执行动画之后，执行另一个动画。方式存在较多局限性动画只能执行一次，循环效果需要通过定时器完成。 在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用css3，同时也可以通过api方式来实现。 指路：小程序animatiom动画API API解读 小程序中，通过调用api来...

    MingjunYang 评论0 收藏0

  • 两种方案开发小程序动画

    摘要：通过这种方法产生的动画，无法按照原有轨迹收回，所以在事件之后设置了定时器，定义在执行动画之后，执行另一个动画。方式存在较多局限性动画只能执行一次，循环效果需要通过定时器完成。 在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用css3，同时也可以通过api方式来实现。 指路：小程序animatiom动画API API解读 小程序中，通过调用api来...

    chengjianhua 评论0 收藏0

发表评论

登陆后可评论

0条评论

LoftySoul

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<