uniapp及vue中动画功能实现方案

需求场景：实际开发过程中，我们经常遇到各类比较炫酷的动画开发，比如简单的echarts插件使用，animation动画等...

动画实现方案：

1.css动画，如gif,a-png,animation,transform等

animation: handleAni 1s linear infinite;
@keyframes handleAni {
    0% { //css样式 }
    50%{ //css样式 }
    100% { // css样式 }
    或者
    from {}
    to {}
}

理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活

2.vue内置组件transition

<!-- 将要使用动画的内容放在transition里即可 -->
<transition name="fade">
 <div v-show="show"></div>
</transition>


.fade-enter-active,
.fade-leave-active {
 transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
 opacity: 0
}

3.切视频

前端两种播放视频的方式_木易66丶的博客-CSDN博客_前端视频播放

4.循环序列帧

简单思路是设计师给出N个几十kb的小图片，利用setInterval定时器循环图片，需要注意的是:setInterval会越循环越快，需要定义变量intervalFlag防止加速，缺点：这种方式属于很多图片无限循环，后边的图片不断覆盖前边的图片，如果图片加载缓慢会导致卡白，而且比较耗费性能

<img :src="showImageUrl" class="" mode="aspectFit" />
data() {
    return {
        intervalFlag: false,
        setIntervalNumber: 0,
        showImageUrl: '',
        interval: null,
    }
}
handleAni() {
    if(this.intervalFlag) return //防止加速
    this.intervalFlag = true
    let _this = this
    this.interval = setInterval(function() { _this.setIntervalFunc() }, 60) //每60毫秒执行一次
}
setIntervalFunc() {
    if(this.setIntervalNumber>=40) {
        this.setIntervalNumber = 0
    }
    this.showImageUrl = this.setIntervalNumber + '.png'
}
// 清除定时器
clearIntervalFunc() {
    clearInterval(this.interval)
}

5.lottie

AE导出json文件，项目中引入json实现动画

[笔记]从AE动画到web代码-一一网络

6.svga

6.1.简单实现：vue项目中使用svga格式文件_钱大碗爱吃辣的博客-CSDN博客_vue使用svga

6.2.理解文章：

SVGAPlayer库学习 · 语雀

SVGA使用手册_星星点点微光的博客-CSDN博客_svga使用

6.3.工具：SVGA

svga引入：

// 安装
npm install svgaplayerweb --save

// 引入svgaplayerweb插件
import SVGA from 'svgaplayerweb';

// 引入svga

组件封装：

<template>
    <view class="svgaBox">
        <view id="demo" :style="{ 'position':'absolute', 'left': 0, 'top': 0, 'width': canvasWidth+'px', 'height': canvasHeight+'px' }"></view>
    </view>
</template>
<script>
    import SVGA from 'svgaplayerweb';
    export default {
        props: {
            canvasWidth: {
                type: Number,
                default: 0
            },
            canvasHeight: {
                type: Number,
                default: 0
            },
            imageAniUrl: {
                type: String,
                default: 'default.svga'
            },
            canvasLeft: {
                type: Number,
                default: 0
            },
            canvasTop: {
                type: Number,
                default: 0
            },
            isLoop: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {}
        },
        mounted() {
            this.initSvag()
        },
        methods: {
            initSvag() {
                let _this = this
                var canvasList = document.getElementById('demo')
                var canvas = document.createElement('canvas')
                canvas.width = this.canvasWidth  // Number类型!
                canvas.height= this.canvasHeight // Number类型!
                canvas.style.position = 'absolute'
                canvas.style.top = this.canvasTop
                canvas.style.left = this.canvasLeft
                canvas.style.zIndex = 4
                canvas.id = 'myCanvas'
                canvasList.appendChild(canvas)
                let player = new SVGA.Player('#myCanvas')
                let parser = new SVGA.Player('#myCanvas')
                parser.load(this.imageAniUrl, function(value){
                    player.loops = _this.isLoops?0:1
                    player.setVideoItem(value)
                    player.startAnimation()
                })
            }
        }
    }
</script>

实现效果（转骰子效果）

WeChat_20221008194011-CSDN直播

7.vue-lottie动画

vue中使用Lottie - 简书

Lottie - 轻松实现复杂的动画效果 - 掘金

8.js判断当前页面用什么浏览器打开的方法

js判断当前页面用什么浏览器打开的方法 - phpStudy