如何实现一个JS keyframe动画_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文以实例介绍了实现一个 JS keyframe 动画需要进行的操作。
本文以实现线上支付效果页点击动画为例，介绍动画的实现过程。
引入 Animation 模块，且必须在 export default 外面引入（第 19 行）。
定义 keyframe 的具体动画效果（第 21 行）。
加载动画。调用 animation 的 loadkeyframe 可夹在定义的动画内容（第 135 行）。
给节点指定已加载的动画（第 159 行）。该示例是动态指定节点的 keyframe 动画，也可以将 animation 的相关属性直接写在节点的 class 中。
keyframe 动画中的 animation 属性支持请参考动画。
示例代码如下：
<template>
    <div class="card_root">
        <div class="white_bg"  @click="clickAnimation()">
            <div class = "right_content_div"> 
                    <text value="点击悬浮水滴执行动画"></text>              
                    <div class="image_tip">
                        <image class="image_tip_icon" :style="imageTipeAnimationStyle" resize="cover" src="data:image/png;base64,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"/>
                        <text class="single_line award_number" :style="imageTipeAnimationStyle">{{animationText}}</text>
                        <text class="plus_number" :style="plusNumberAnimationStyle">{{plusAward}}</text>
                    </div>           
                </div>
        </div>
    </div>

</template>

<script>
    // 引入 animation 模块
    const animation = requireModule("animation");
    // 定义 keyframe 动画
    const keyframes = {
        'fluctuate': {
            "transform": [
                {
                    "p":0,
                    "v":"translateY(0rpx)"
                },
                {
                    "p":0.5,
                    "v":"translateY(-10rpx)"
                },
                {
                    "p":1.0,
                    "v":"translateY(0rpx)"
                }
            ]
        },
        'integralClicked': {
            "transform": [
                {
                    "p":0,
                    "v":"scale(1.0)"
                },
                {
                    "p":0.5,
                    "v":"scale(1.2)"
                },
                {
                    "p":1.0,
                    "v":"scale(1.0)"
                }
            ],
            "opacity": [
                {
                    "p":0,
                    "v":"1.0"
                },
                {
                    "p":0.3,
                    "v":"1.0"
                },
                {
                    "p":0.6,
                    "v":"0.0"
                },
                {
                    "p":0.9,
                    "v":"0.2"
                },
                {
                    "p":1.0,
                    "v":"1.0"
                }
            ]
        },
        'plusUp': {
            "transform": [
                {
                    "p":0,
                    "v":"translateY(0rpx)"
                },
                {
                    "p":1.0,
                    "v":"translateY(-48rpx)"
                }
            ],
            "opacity": [
                {
                    "p":0,
                    "v":"0"
                },
                {
                    "p":0.0873,
                    "v":"1.0"
                },
                {
                    "p":0.7205,
                    "v":"1.0"
                },
                {
                    "p":1.0,
                    "v":"0"
                }
            ]
        },
        'rightContentShow': {
            "transform": [
                {
                    "p":0,
                    "v":"scale(0)"
                },
                {
                    "p":0.5704,
                    "v":"scale(1.1)"
                },
                {
                    "p":1.0,
                    "v":"scale(1.0)"
                }
            ],
            "opacity": [
                {
                    "p":0,
                    "v":"1"
                },
                {
                    "p":1.0,
                    "v":"1"
                }
            ]
        }
    };

    // 加载 keyframe 动画
    animation.loadKeyframes(keyframes);    
    export default {
        data: {
            animationText:"123",
            plusAward: "123",
            shouldAnim: true
        },

        onCreated: function() {
            this.imageTipeAnimationStyle = {
                animationName: "fluctuate",
                animationDuration: "2000ms",
                animationDelay: "000ms",
                animationTimingFunction: "linear",
                animationIterationCount: "infinite",
            };
        },

        didAppear() {
            
        },

        methods: {            
            clickAnimation: function() {
                this.imageTipeAnimationStyle = {
                    animationName: "integralClicked",
                    animationDuration: "750ms",
                    animationDelay: "0ms",
                    animationTimingFunction: "ease-in-out",
                    animationIterationCount: "1",
                    animationFillMode: "backwards"
                };
                this.plusNumberAnimationStyle = {
                    opacity: 1.0,
                    animationName: "plusUp",
                    animationDuration: "350ms",
                    animationDelay: "0ms",
                    animationTimingFunction: "ease-in-out",
                    animationIterationCount: "1",
                    animationFillMode: "backwards"
                };
            }
        },
    }
</script>

<style>
    .card_root {
        display: flex;
        width: auto;
        flex-direction: row;
        padding-right: 24rpx;
        padding-left: 24rpx;
    }
    .white_bg {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 144rpx;
        padding-right: 16rpx;
        padding-left: 16rpx;
        border-width: 0;
        border-radius: 16rpx;
        padding-top: 20px;
    }
    .left_div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex:1;
    }
    .left_content {
        font-weight:600;
        font-size: 28rpx;
        color : #333333;
        width: auto;
    }
    .tips {
        margin-top:6rpx;
        display:flex;
        font-size: 24rpx;
        color : #99999999;
        width: auto;
    }
     .right_award {
        font-size: 40rpx;
        color : #999999;
        display: flex;
        width: auto;
        flex-shrink:0;
    }
    .right_content_div{
        display:flex;
        flex-direction: row;
        flex-shrink: 1;
        justify-content: center;        
    }
    .right_content_first{
        display:flex;
        flex-shrink: 0;
        flex-direction: row-reverse;
        position: absolute;
        right: 0rpx;
    }
    .right_div {
        padding-left:1rpx;
        display:flex;
        flex-direction: row;
        flex-shrink: 0;
        width: 272rpx;
        overflow: visible;
    }
    .image_tip{
        position: relative;
        justify-content:center;
        width:80rpx;
        height: 85rpx;
        margin-left: 20px;
    }
    .image_tip_wrapper {
        width:80rpx;
        height: 85rpx;
        position: absolute;
        top: 29rpx;
        right: 17rpx;
    }
    .image_tip_icon {
        width:80rpx;
        height: 85rpx;
    }
    .arrow{
        display:flex;
        flex-shrink: 0;
        align-self:center;
        color:#CCCCCC;
        font-size: 14pit;
        font-family: IconFont;
        margin-left: 6rpx;
        margin-right: -7rpx;
    } 
    .single_line {
        overflow: hidden;
        flex-shrink: 1;
        text-overflow:ellipsis;
        lines: 1;
    }
    .content_icon{
        width: 36rpx;
        height: 38rpx;
        align-self:center;
    }
    .award{
        margin-left: 10rpx;
        font-size:30rpx;
        color:#999999;
    }
    .award_number{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:36rpx;
        color:#806A00;
        text-align: center;
        line-height: 85rpx;
    }
    .plus_number{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:36rpx;
        color:#806A00;
        text-align: center;
        line-height: 85rpx;
        opacity: 0.0;
    }
</style>
如有需要，可单击此处 detailKeyFrame.zip 获取完整示例代码。