网站地图    收藏   

主页 > 前端 > javascript >

js动画库-支持transform,颜色,透明,圆角,平移,集成加速度

来源:未知    时间:2021-09-09 22:29 作者:小飞侠 阅读:

[导读] 插件地址: https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js 预览: http://www.zixuephp.com/codes/js/animate/ html: !DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title动画/titlestyle*{margin:0px;padding:0px;}#a{width:50px;...

js动画库-支持transform,颜色,透明,圆角,平移,集成加速度。

站长压缩自己时间打造的集万千宠爱(动画)于一身的动画库,想用在IE7或者8的就别看了,欢迎大家使用!

image.png


插件地址:

https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js

新1.0.3版本,新增 window, dom 的 scrollTop 和 scrollLeft 动画支持

animate.min.1.0.3.js.zip

预览:

http://www.zixuephp.com/codes/js/animate/


实列简介:

A.move(dom对象,{
    css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,color,borderColor,fontSize,opacty,transform
    其中:transform 包括( rotate,scale,translate,skew)
},2000,function(item){
    回调结束,item包括DOM对象和各个选项,可以打印查看
    console.log('触发完成',item);
},A.Easing.Quadratic.In);
A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项:
和tween.js一致。

 

新1.0.3版 scroll


针对DOM
A.move(document.getElementById('scroll'), {scrollTop: 300, scrollLeft: 300}, 1000, function(item){
A.move(item.dom, {scrollTop: 10}, 1000);
});
针对window对象
A.move(window, {scrollTop: 300}, 1000, function(item){
A.move(window, {scrollTop: 10}, 1000);
});

教程:一个小方块位移

A.move(document.getElementById("a"),{ left:500},1000,function(){

    alert('距离左侧位移500像素,执行时间为1秒');

})

教程:一个小方块宽高变成200

A.move(document.getElementById("a"),{ width:200,height:200},1000,function(){

    alert('小方块宽高变成200,执行时间为1秒');

})

教程:一个小方块背景颜色变成红色

A.move(document.getElementById("a"),{ background:"#ff0000"},1000,function(){

    alert('小方块背景颜色变成红色,执行时间为1秒');

})

教程:一个小方块软转360度

A.move(document.getElementById("a"),{  transform:"rotate(360edg)"},1000,function(){

    alert('小方块软转360度,执行时间为1秒');

})


第四个参数加速度:Easing

逐渐加速公式:

A.Easing.Quadratic.In
目前支持如下加速度
A.Easing.Linear.None
A.Easing.Quadratic.In,Out,InOut
A.Easing.Cubic.In,Out,InOut
A.Easing.Quartic.In,Out,InOut
A.Easing.Quintic.In,Out,InOut
A.Easing.Sinusoidal.In,Out,InOut
A.Easing.Exponential.In,Out,InOut
A.Easing.Circular.In,Out,InOut
A.Easing.Elastic.In,Out,InOut
A.Easing.Back.In,Out,InOut
A.Easing.Bounce.In,Out,InOut


其他细节组合动画自己就写CSS样式即可,记得是驼峰法命名哦,其他子尝试吧,如有问题请联系站长邮箱 904561283@qq.com

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
 *{
            margin: 0px;
            padding: 0px;
        }
        #a{
            width: 50px;
            height: 50px;
            background: #f00;
            position: absolute;
            left:50px;
            top:20px;
        }

        #b{
            width: 50px;
            height: 50px;
            background: #00d6b2;
            position: absolute;
            left:0px;
            top:80px;
        }

        #c{
            width: 200px;
            height: 200px;
            background: #00d6b2;
            position: absolute;
            left:80px;
            top:130px;

            margin-left: 10px;
        }

        #f{
            width: 120px;
            height: 80px;
            background: #f00;
            position: absolute;
            left:80px;
            top:360px;
            /*border-radius: 30%;*/
 transform:rotate(45deg);
            /* rotate(45deg) scale(0.5,0.5) rotate(15deg) skew(200deg,200deg)  */

 }

        #e{
            width: 100px;
            height: 100px;
            background: #000000;
            position: absolute;
            left:300px;
            top:330px;
        }


    </style>

</head>
<body>

    <div id="a"></div>
    <div id="b"></div>
    <div id="c" style="width:200px;height:200px;left:80px;top:130px;"></div>

    <div id="f"></div>

    <div id="e"></div>

    <script src="https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js"></script>
    <script>
 var ops = 1;
 var type = false;
 function autoAnm(dom){
 var op = !type?0.5:1;
 A.move(dom,{
 //opacity:op,
                //background:"#00ff00",
                //top:"425px",
                //width:110.56,
                //borderRadius:"100px",
 transform:"rotate(360deg)" // rotate(45deg) scale(0.1,0.1) skew(30deg,30deg)  rotate(45deg) translate(24px,0px) skew(0.1deg,0.1deg) skew(200deg,200deg) translate(100px,0px) rotate(30deg) scale(2.5,2.5) translate(100px,30px)

 },11500,function(item){
 //A.move(item.dom,{
                //    //width:300,
                //    //height:300,
                //    //background:"#0000ff",
                //    //borderRadius:"0px",
                //    transform:"skew(0deg,0deg)"
                //},600,function(item){
                //},Easing.Elastic.Out);
 },null);
        }

 autoAnm(document.getElementById("f"),ops);


 A.move(document.getElementById("a"),{
 left:500,
 top:150
 },2000,function(){
 console.log('触发完成');
        },A.Easing.Quadratic.In);


 A.move(document.getElementById("b"),{
 left:500,
 top:180,
 width:300,
 height:190
 },2000,function(item){
 console.log('触发完成',item);

 A.move(document.getElementById("b"),{
 left:100,
 top:50
 },1200,function(item){
 console.log('触发完成',item);

 //setTimeout(function(){
 console.log(item.dom);
 A.move(item.dom,{
 left:300,
 top:300,
 width:100,
 height:100
 },800,function(item){
 console.log('触发完成',item);
                    }, A.Easing.Quintic.InOut);
 //},1000);




 },A.Easing.Quintic.Out);


        },A.Easing.Cubic.InOut);


 A.move(document.getElementById("c"),{
 width:100,
 height:100,
 opacity:0.3,
 color:"#ff0"
 },2000,function(item){
 console.log('触发完成',item);
        },A.Easing.Elastic.In);


 A.move(document.getElementById("e"),{
 top:630
 },1300,function(item){

 A.move(item.dom,{
 top:50,
 background:"#ff0000",
 opacity:0.3,
 width:600,
 height:600,
            },1600,function(item){
 console.log('触发完成',item);

 A.move(item.dom,{
 width:100,
 height:100,
 transform:"rotate(45edg)"
 },1600,function(item){

                });

            }, A.Easing.Quintic.InOut);


        }, A.Easing.Cubic.Out);


 </script>

</body>
</html>


调用方法详解:

A.move(dom对象,{
    css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,opacty,transform
    其中:transform 包括( rotate,scale,translate,skew)
},2000,function(item){
    回调结束,item包括DOM对象和各个选项,可以打印查看
    console.log('触发完成',item);
},A.Easing.Quadratic.In);
A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项:
和tween.js一致。
目前支持如下加速度
A.Easing.Linear.None
A.Easing.Quadratic.In,Out,InOut
A.Easing.Cubic.In,Out,InOut
A.Easing.Quartic.In,Out,InOut
A.Easing.Quintic.In,Out,InOut
A.Easing.Sinusoidal.In,Out,InOut
A.Easing.Exponential.In,Out,InOut
A.Easing.Circular.In,Out,InOut
A.Easing.Elastic.In,Out,InOut
A.Easing.Back.In,Out,InOut
A.Easing.Bounce.In,Out,InOut


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论