uni-app:uni-transition动画分多个step执行(hbuilderx 3.7.3)

一，官方文档地址:

https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html

二，js代码：

<template>
    <view>
        <view class="navBarBox" style="position: fixed;bottom:60px;z-index: 1000;">
                <!-- 状态栏占位 -->
                <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
                <!-- 导航栏内容 -->
                <view class="navBar" style="height:93rpx;">
                    <uni-transition ref="ani" :show="show" 
                    style="width:60rpx;height:60rpx;margin-left: 340rpx;display: flex;
        flex-direction: row;justify-content: center;align-items: center;">
                            <image class="heart" src="http://studyfile.nihonnoma.net/img/heart.png" :style="{ opacity: heartOpacity  }"  />
                    </uni-transition>
                    <image ref="fav" :src="favSrc" 
                    style="position:absolute;width:60rpx;height:60rpx;margin-left: 120rpx;display: flex;
                    flex-direction: row;justify-content: center;align-items: center;" @click="setfavorite" />
                </view>
            </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show:true,
                favSrc:"http://studyfile.nihonnoma.net/img/heart_line.png",
                // 状态栏高度
                statusBarHeight: 60,
                heartOpacity:0,    //动画图的透明度
                isMoving:0,        //是否正在移动动画
                isFavorited:0,     //是否已收藏
            }
        },
        onLoad(option) {
              //获取手机状态栏高度
              this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
        },
        methods: {
            
            //收藏或取消收藏
            setfavorite() {
               if (this.isMoving == 1) {
                   return false;
               }
               if (this.isFavorited == 1) {
                   this.unfavorite();
               } else {
                   this.favorite();
               }
            },
            //收藏
            favorite(){
                this.isMoving = 1;
               this.show = true;
               this.heartOpacity = 1;
               this.reset();

                setTimeout(()=>{
                    this.explode();
                },50);
                setTimeout(()=>{
                    this.favSrc = "http://studyfile.nihonnoma.net/img/heart.png";
                    this.isMoving = 0;
                    this.isFavorited = 1;
                    this.heartOpacity = 0;
                },1050);
            },
            
            //取消收藏
            unfavorite(){
                this.isMoving = 1;
                this.favSrc = "http://studyfile.nihonnoma.net/img/heart_line.png";
                
                uni.showToast({
                    title:"已取消收藏",
                    duration:500,
                })
                setTimeout(()=>{
                    this.isMoving = 0;
                    this.isFavorited = 0;
                },500);
            },
            
            //重置动画元素
            reset() {
                console.log(this.$refs.ani);
                this.$refs.ani.step({
                    translateY: '0rpx',
                    scale:1,
                    opacity: '1'
                }, {
                    transformOrigin: '50% 50%',
                    duration: 1
                });
                
                this.$refs.ani.run()
            },
            
            //动画
            explode() {
                //向上移动
                this.$refs.ani.step({
                   translateY: '-800rpx',
                }, {
                   timingFunction: 'ease-in',
                   duration: 500
                });
                //变大和透明
                this.$refs.ani.step({
                    scale:3,
                    opacity: '0'
                }, {
                   timingFunction: 'linear',
                   duration: 500
                });
                //执行
                this.$refs.ani.run()
            }
            
        }
    }
</script>

<style>
.heart{
    width:60rpx;
    height:60rpx;
}
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-unitransition-dong-hua-fen-duo-ge-step-zhi-xing/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

三，查看效果

说明：收藏的心形向上滑动后再变大变透明

四,查看hbuilderx的版本: