使用uni-app简单封装Animation动画,简单方便。 不依赖其他组件,可单独使用。 内附DEMO文档。

文件结构

  1. animate.js 插件文件
  2. DEMO.vue DEMO文件

预览图

使用

<template>
    <view class='move-div'>
        <button type="primary" @click='move'>点击运动</button>

        <div id='box'>
            <div id='move' :animation='animationData'>我是移动框</div>
        </div>
    </view>
</template>


import {animate} from './animate.js';
export default {
    data() {
        return {
            animationData: {}
        };
    },
    methods: {
        move(){
            var self = this;
            animate({
                el: self,   //必选
                animationName: 'animationData',  //必选
                json: {  //必选
                    rotate: 45,
                    opacity: 0.5,
                    scale: [2,2],
                    top: 200
                },
                timingFunction: 'ease',  //可选,默认'ease'
                time: 2000,  //可选,默认400
                callback: function(){  //运动完回调函数,可选
                    animate({
                        el: self,
                        animationName: 'animationData',
                        json: {
                            rotate: 0,
                            opacity: 0.8,
                            scale: [1.5,1.5],
                            top: 100,
                            left: 200
                        },
                        timingFunction: 'ease',
                        time: 3000,
                        callback: function(){
                            console.log('运动完成');
                        }
                    })
                }
            });
        },

    }
}

不支持H5端。 如果在H5端使用,

  1. 在main.js中引入zepto

    Vue.prototype.$ = require('zepto.js');
  2. 在其他页面即可直接使用this.$('选择器').animate方法

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问