JavaScript---动画框架

animate.css

• animate.css是一个来自国外的CSS3动画库，它预设了抖动（shake）、闪烁（flash）、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达70多种动画特效，几乎包含了所有常见的动画特效
• 网站: https://github.com/daneden/animate.css
• 步骤
  • 引入animate.css的文件
  • 给需要执行动画的元素添加类名
• animated infinite bounce delay-2s
  • 第一个animated是一个基类, 只要元素需要执行动画就必须添加这个类型
  • 第二个infinite是动画执行的次数, 默认只执行一次, infinite可以无限执行, 此类名是可选的
  • 第三个bounce是动画名称
  • 第四个delay-xx, 延迟时间, 此类名是可选的
• 框架的定制:
  • 所有的CSS框架都可以随意定义, 但是一定要注意不要直接修改框架

Wow.js

• 对animate.css的扩充, 可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果, 让页面滚动更有趣
• 地址: https://github.com/matthieua/WOW
• 使用步骤:
  • WOW.JS基本使用
  • 引入animate.css
  • 引入wow.js
  • 给需要执行动画的元素添加类名
  • 在JavaScript中初始化wow.js
• wow slideInLeft
  • 第一个参数: 是一个基类, 需要需要执行动画必须添加这个类
  • 第二个参数: 动画的名称

• 初始化的时候可以接收一个对象

window.addEventListener('load', function (ev) {
        var wow = new WOW(
            {
                boxClass:     'test',      // 需要执行动画的元素的 class (default is wow)
                animateClass: 'animated', // animation.css 动画的 class (default is animated)
                offset:       600,          // 距离可视区域多少开始执行动画 (default is 0)
                mobile:       true,       // 是否在移动设备上执行动画 (default is true)
                live:         true,       // 异步加载的内容是否有效 (default is true)
                callback:     function(box) {
                    // 每次动画启动时都会触发回调
                    // 传入的参数是正在动画的DOM节点
                },
                scrollContainer: null // 滚动容器选择器，默认使用窗口
            }
        );
        wow.init();
    });

scrollReveal

• scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次
• 使用步骤:
  • 引入框架
  • 搭建结构体
  • 创建ScrollReveal对象
  • 调用ScrollReveal对象的reveal方法, 将需要执行动画的元素给它

 var sReveal = ScrollReveal();
    sReveal.reveal('做动画的选择器', {
        reset: true, // 重置动画, 开启滚动时往返都有动画, 默认只有向下滚动有动画
        duration: 3000, // 动画持续的时间
        delay: 0, // 动画延迟时间
        rotate: {x: 0, y: 0, z: 45}, // 指定过渡的角度
        opacity: 0.2, // 初始化透明度
        scale: 0.8, // 初始化缩放比例
        distance: "500px", // 初始化默认的偏移位
        origin: "bottom", // 初始化默认偏移位的方向
        easing: "ease-in-out", // 指定动画的运动方式(匀速/缓动)
        beforeReveal: function () {
            // 动画开始之前的回调
            // console.log("动画开始");
        },
        afterReveal: function () {
            // 动画结束时放的回调
            // console.log("动画结束");
        },
        beforeReset: function () {
            // 动画开始被重置
            // 什么是动画重置?
            // 执行动画的元素离开屏幕之后就会被重置
            // 重置就是重新设置为动画开始之前的默认样式
            console.log("动画开始被重置");
        },
        afterReset: function () {
            // 动画重置结束
            console.log("动画重置结束");
        }
    });