jquery动画切换引擎插件 Velocity.js 学习02

最新推荐文章于 2018-10-26 11:28:19 发布

转载最新推荐文章于 2018-10-26 11:28:19 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lvmylife/p/5495058.html

本文介绍了一个使用Velocity.js实现的动画案例，包括卡片翻转效果、图片缩放等交互动画。通过自定义动画序列实现了平滑过渡，展示了Velocity.js在Web动画方面的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例实践：

第一页会以动画形式进入页面；
点击进入按钮时，第一页以动画消失，第二页以动画形式进入，同时四张图片也定义从小到大的动画形式；
第二页关闭按钮点击时，先是四张图片以缩小动画消失，然后第二页以动画形式消失，第一页以动画形式进入。

JS代码:

(function(){
    // 定义变量
    var container = $('.container');                   //主容器
    var boxFront = $('.box-front');                    //卡片正面
    var mkLogo = $('.img-head');                       //卡片logo(火焰logo)
    var boxBack = $('.box-back');                      //卡片背面
    var boxBackImgs= $('.box-back').find('img');       //卡片背面中四幅图片

    // 自定义动画---进入
    $.Velocity.RegisterUI('mk.slideUp',{
        defaultDuration:500,
        calls:[
            [{opacity:[1,0],translateY:[0,100]}]
        ]
    });

    // 自定义动画---消失
    $.Velocity.RegisterUI('mk.slideDown',{
        defaultDuration:300,
        calls:[
            [{opacity:[0,1],translateY:[100,0]}]
        ]
    })

    // 自定义动画---图片弹性放大
    $.Velocity.RegisterUI('mk.scaleImg',{  //定义动画名称
        defaultDuration:500,
        calls:[
            [{opacity:[1,0],scale:[1,0]}]  //[1,0]表示[结束状态,开始状态]
        ]
    })
    // 自定义动画---图片弹性缩小
    $.Velocity.RegisterUI('mk.scaleImg02',{
        defaultDuration:500,
        calls:[
            [{opacity:[0,1],scale:[0,1]}]
        ]
    })

    // 定义正面进入序列
    var seqFront = [
        {
            elements:container,
            properties:'mk.slideUp',
            options:{
                delay:300   // 设置延时
            }
        },
        {
            elements:boxFront,
            properties:'mk.slideUp',
            options:{
                sequenceQueue:false // 设置队列形式为同时
            }
        },
        {
            elements:mkLogo,
            properties:'mk.slideUp',
            options:{                
                sequenceQueue:false,
                delay:60
            }
        }
    ];
    // 定义点击“进入”按钮正面消失的序列及背面出现的序列
    var btnClick = [
        {
            elements:container,
            properties:'mk.slideDown'
        },
        {
            elements:boxFront,
            properties:'mk.slideDown',
            options:{
                sequenceQueue:false
            }
        },
        {
            elements:mkLogo,
            properties:'mk.slideDown',
            options:{                
                sequenceQueue:false
            }
        },{
            elements:container,
            properties:'mk.slideUp',
            options:{
                delay:100
            }
        },{
            elements:boxBack,
            properties:'mk.slideUp',
            options:{
                sequenceQueue:false
            }
        },{
            elements:boxBackImgs,
            properties:'mk.scaleImg',
            options:{
                delay:60
            }
        }
    ];
    // 定义点击“关闭”按钮背面消失的序列和正面出现的序列
    var closeClick = [
        {
            elements:boxBackImgs,
            properties:'mk.scaleImg02',
            options:{                
                sequenceQueue:false
            }
        },
        {
            elements:container,
            properties:'mk.slideDown'
        },
        {
            elements:boxBack,
            properties:'mk.slideDown',
            options:{
                sequenceQueue:false
            }
        },
        {
            elements:container,
            properties:'mk.slideUp',
            options:{
                delay:200
            }
        },{
            elements:boxFront,
            properties:'mk.slideUp',
            options:{
                sequenceQueue:false
            }
        },{
            elements:mkLogo,
            properties:'mk.slideUp',
            options:{
                sequenceQueue:false
            }
        }
    ];
    
    // 初始化正面
    $.Velocity.RunSequence(seqFront);

    // 正面进入按钮点击事件
    $('.btn').on('click',function(){
        $.Velocity.RunSequence(btnClick);
    })

    // 背面关闭按钮点击事件
    $('.close').on('click',function(){
        $.Velocity.RunSequence(closeClick);
    })

})(jQuery)

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画案例</title>
    <link rel="stylesheet" href="exmple.css">
    <script src="js/jquery.js"></script>
    <script src="js/velocity.min.js"></script>
    <script src="js/velocity.ui.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 卡片正面 -->
        <div class="box-front">
            <img class="img-back" src="imgs/back.jpg" alt="">
            <img class="img-head" src="imgs/head.jpg" alt="">
            <div class="intro">
                <h3>慕课网</h3>
                <span>慕课网,只学有用的。</span>
                <a class="btn" href="##">点击进入</a>
            </div>
        </div>
        <!-- 卡片背面 -->
        <div class="box-back">
            <div class="close">x</div>
            <h3>慕课网</h3>
            <span>慕课网,只学有用的。</span>
            <img src="imgs/pic1.jpg" alt="">
            <img src="imgs/pic2.jpg" alt="">
            <img src="imgs/pic3.jpg" alt="">
            <img src="imgs/pic4.jpg" alt="">
        </div>
    </div>
    <script src="js/exmple.js"></script>
</body>
</html>

CSS样式:

*{ margin: 0; padding: 0; }
body{
    background-color: #333; overflow-y:hidden;
}
.container{
    width: 320px; height: 430px; background-color: #fff; margin: 60px auto;
    position: relative;
}
/*正面*/
.box-front{
    position: relative; z-index: 2;
}
.img-back{
    width: 320px; height: 213px;
}
.img-head{
    position: absolute; top: 213px; left: 50%; width: 90px; height: 90px; border-radius: 50%;
    margin-left: -45px; margin-top: -45px; border:2px solid #f0f0f0;
}
.intro{
    margin-top: 45px; text-align: center;
}
.intro h3{
    display: inline-block; width: 100%; margin-top: 5px;
}
.intro span{
    display: inline-block; width: 100%; margin-top: 15px;
}
.intro .btn{
    display: inline-block; width: 82%; color: #fff; background-color: #2444FF; padding: 10px;
    text-decoration: none; border-radius: 6px; margin-top: 40px; transition: background 1s;
    cursor: pointer;
}
.intro .btn:hover{
    background-color: #2468FF;
}

/*卡片背面样式*/
.box-back{
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #333; z-index: 1
}
.box-back .close{
    position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; line-height: 10px;
    font-size: 18px; color:#999; cursor: pointer; 
}
.box-back .close:hover{
    color: #f00;
}
.box-back h3{
    text-align: center; margin-top: 20px;  font-size: 24px;
}
.box-back span{
    display: block; text-align: center; font-size: 16px; margin: 10px 0 30px;
}
.box-back img{
    display: inline-block; margin: 0px 0px 12px 10px; width: 143px;
}
.container,.box-front,.img-head,.box-back,.box-back img{
    opacity: 0;
}

参考：慕课网Velocity.js实现弹出式相框

转载于:https://www.cnblogs.com/lvmylife/p/5495058.html