js动画学习

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js动画学习相关的知识,希望对你有一定的参考价值。

      前面分别介绍了单独改变单一属性值得动画,从本节起开始介绍多属性封装函数,一个函数搞定多种属性值的改变。

      首先介绍一个很重要的函数getStyle(),这个函数返回一个元素的当前属性值。两个形参分别是元素和属性。注意浏览器的兼容性问题。

1 //获得元素样式专用封装函数,返回该属性的当前值
2 function getStyle(obj,attr) {
3     if (obj.currentStyle) {//IE浏览器
4         return obj.currentStyle[attr];
5     } else {
6         return getComputedStyle(obj,false)[attr];//火狐浏览器
7     }
8 }

      接下来重点来了,一个函数实现改变多种属性的动画:

//多物体改变样式(宽,高,字体大小,边框等,透明度需单独分析)速度缓冲封装函数
function startMove(obj,attr,target) {//元素,改变的样式属性,达到的目标值
    clearInterval(obj.timer);//首先清除定时器
    obj.timer=setInterval(function(){
        //1.取当前值
        var icur=0;//icur返回物体样式属性值的大小
        if (attr==‘opacity‘) {//如果属性是透明度,透明度的返回值是零点几的小数
            icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
        } else {
            icur=parseInt(getStyle(obj,attr));
        }
        //2.算速度
        var speed=(target-icur)/8;//分母为比例系数K,可调
        speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整,不然移动不到终点就停止
        //3.检测运动是否停止
        if (icur==target) {
            clearInterval(obj.timer);
        } else {
            if (attr==‘opacity‘) {
                obj.style.filter=‘alpha(opacity:‘+(icur+speed)+‘)‘;//IE浏览器
                obj.style.opacity=(icur+speed)/100;//火狐浏览器
            } else {
                obj.style[attr]=icur+speed+‘px‘;
            }
        }
    },30)
}

       我们通过两个div来验证一下:

1 <style type="text/css">
2     #div1,#div2{
3         width: 200px;
4         height: 200px;
5         background: red;
6         border: 1px solid black;
7         margin-bottom: 10px;
8     }
9 </style>
 1 <div id="div1"></div>
 2 <div id="div2"></div>
 3 <script type="text/javascript">
 4 window.onload=function(){
 5     var ob1=document.getElementById(div1);
 6     var ob2=document.getElementById(div2);
 7     ob1.onmouseover=function(){
 8         startMove(this,width,400);
 9     }
10     ob1.onmouseout=function(){
11         startMove(this,width,200);
12     }
13     
14     ob2.onmouseover=function(){
15         startMove(this,opacity,31);
16     }
17     ob2.onmouseout=function(){
18         startMove(this,opacity,100);
19     }
20     //alert(parseFloat(0.07*100));弹出7.00000000001而不是7    所以上面程序中的parseFloat前加四舍五入Math.round函数
21 }
22 </script>

      这样就实现了通过一个startMove()函数实现改变物体的宽和透明度了。

以上是关于js动画学习的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段7——CSS动画

使用嵌套片段和动画对象

Android:将“ViewPager”动画从片段更改为片段

Android 动画嵌套片段

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

配置更改后片段丢失过渡动画