JS实现css属性动画效果

LoftySoul 发布于2019-08-21 17:31 / 2828人阅读

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

html代码



    
        
        css属性运动框架
 
 
 
    
    
        
            高动画
            宽动画
            透明度动画
            高宽透明度链式动画
            高宽透明度同时动画

引入的JS代码,运动框架move.js

//运动
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
function startMove(obj,json,fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag=true;//标杆,假设所有运动都达到了目标值
                for(var attr in json)
            {
                    //1.去当前的值
                    var icur = 0;
                    if(attr == "opacity") {
                        icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat获取小数.Math.round四舍五入
                    } else {
                        icur = parseInt(getStyle(obj, attr)); //parseInt获取整数
                    }
                    //2.算速度
                    var speed = (json[attr] - icur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //3.检测属性动画是否全部达到目标值
                    if(icur !== json[attr]) 
                    {
                        flag=false;//如果不是所有的动画都达到目标值，标杆设为false
                    }        
                    if(attr == "opacity") 
                    {
                            obj.style.filter = "alpha(opacity:" + (icur + speed) + ")";
                            obj.style.opacity = (icur + speed) / 100;
                        }
                    else 
                    {
                            obj.style[attr] = icur + speed + "px";
                    }
                }
                //在动画结束的时候检测是否有回调函数,如果检测到有回调函数，执行
                    if(flag)
                    {
                        clearInterval(obj.timer);
                        if(fn)
                        {
                            fn();
                        }
                    }
                }, 30)
            }
     //获取对象属性
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];//IE
        }
        else{
            return getComputedStyle(obj,false)[attr];//火狐 chrome
        }
    }

云服务器 GPU云服务器 js动画效果 js 漂浮动画效果 js 消失动画效果 js动画效果瀑布

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

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

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

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

darcrand 2019-08-23 14:47 评论0 收藏0
[练习]利用CSS steps 实现逐帧动画

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

RiverLi 2019-08-30 12:55 评论0 收藏0
两种方案开发小程序动画

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

MingjunYang 2019-08-23 12:58 评论0 收藏0
两种方案开发小程序动画

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

chengjianhua 2019-08-29 17:13 评论0 收藏0