mpvue中小程序自定义动画

mpvue中小程序自定义动画

场景: mpvue框架搭建的小程序, 本人能力有限, 写js动画还可以, 但是小程序里面看了文档没闹明白, 然后就各种查资料, 终于功夫不负有心人。话不多说，上代码 ↓

一、动画形式1==> 从底部滑入滑出

<template>
	<!-- html部分 -->
	<div>
		<div class="open" @click="showAnimation()" :animation="animationData" v-if="showStatus">打开动画</div>
		<div class="close" @click="hideAnimation()">关闭动画</div>
	</div>
</template>

/* css部分 */
<style scoped>
	.open {
		width: 100%;
		height: 100rpx;
		lineheight: 100rpx;
		textalign: center:
	}
	.close {
		width: 100%;
		height: 100rpx;
		lineheight: 100rpx;
		background: pink;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>

// js部分
<script>
export default {
	data() {
		return {
			showStatus: false,
          	animationData: {},
		}
	},
	methods: {
		showAnimation () {
            // 显示遮罩层
            var animation = wx.createAnimation({
                /**
                 * http://cubic-bezier.com/
                 * linear 动画一直较为均匀
                 * ease 从匀速到加速在到匀速
                 * ease-in 缓慢到匀速
                 * ease-in-out 从缓慢到匀速再到缓慢
                 *
                 * http://www.tuicool.com/articles/neqMVr
                 * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
                 * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
                 */
                duration: 300,
                timingFunction: "ease",
                delay: 0
            })
            this.animation = animation
            animation.translateY(300).step()
            this.animationData = animation.export(), // export 方法每次调用后会清掉之前的动画操作。
            this.showModalStatus = true
            setTimeout(() => {
                animation.translateY(0).step()
                this.animationData = animation.export()  // export 方法每次调用后会清掉之前的动画操作。
                // console.log(this)
            }, 300)
        },

        hideAnimation () {
            // 隐藏遮罩层
            var animation = wx.createAnimation({
                duration: 300,
                timingFunction: "ease",
                delay: 0
            })
            this.animation = animation
            animation.translateY(300).step()
            this.animationData = animation.export(),
            setTimeout(function () {
                animation.translateY(0).step()
                this.animationData = animation.export(),
                this.showModalStatus = false
                // console.log(this)
            }.bind(this), 300)
        }
	}
}
</script>

二、动画形式2==> 旋转 (类似于下拉菜单的箭头的动画)

<template>
	<!-- html部分 -->
	<div class="studyBiaoq">
         <div class="studyBiaoq2" @click="rotate90">
            <span>点击展开菜单</span>
           <image class="rightIcon" :animation="animations" src="/static/images/right.png" mode="scaleToFill"></image>
         </div>
         <div class="courseType" v-if="courseType">
           <p class="courseTypeTitle courseTypeSelect" @click="rotate90">菜单1</p>
           <p class="courseTypeTitle" @click="rotate90">菜单2</p>
           <p class="courseTypeTitle" @click="rotate90">菜单3</p>
           <p class="courseTypeTitle" @click="rotate90">菜单4</p>
         </div>
      </div>
</template>

<style scoped>
	/* css 部分 */
	.studyBiaoq {
	    height: 57rpx;
	    line-height: 57rpx;
	    padding-left: 21rpx;
	    padding-right: 21rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size:28rpx;
	    font-family:PingFangSC-Medium,PingFang SC;
	    font-weight:500;
	    color:rgba(60,64,67,1);
	    background:rgba(248,248,248,1);
	    border-radius: 5rpx;
	    vertical-align: middle;
	    position: relative;
	  }
	  .studyBiaoq2 {
	    height: 57rpx;
	    line-height: 57rpx;
	    padding-left: 21rpx;
	    padding-right: 21rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size:28rpx;
	    font-family:PingFangSC-Medium,PingFang SC;
	    font-weight:500;
	    color:rgba(60,64,67,1);
	    background:rgba(248,248,248,1);
	    border-radius: 5rpx;
	    vertical-align: middle;
	  }
	  .studyBiaoq2 .rightIcon {
	    width: 10rpx;
	    height: 18rpx;
	    margin-left: 20rpx;
	  }
	  .courseType {
	    /*display: none;*/
	    width: 200rpx;
	    /*height: 500rpx;*/
	    background-color: #ffffff;
	    box-shadow: 0 2px 24px 0 rgba(72,72,72,.14);
	    position: absolute;
	    left: 50%;
	    top: 67rpx;
	    transform: translateX(-50%);
	    z-index: 100;
	    padding: 15rpx;
	    border-radius: 8rpx;
	  }
	  .courseTypeTitle {
	    width: 100%;
	    height: 80rpx;
	    line-height: 80rpx;
	    text-align: center;
	    font-size:28rpx;
	    font-family: PingFang SC;
	    font-weight:400;
	  }
  </style>

// js部分
<script>
export default {
	data() {
		return {
			animations: {}, // 动画
            courseType: false, // 所学菜单类别显隐
		}
	},
	methods: {
		rotate90(e) {
                this.courseType = !this.courseType
                console.log('xuanzhuan')
                let _this = this
                let animation = wx.createAnimation({   //创建动画
                    duration: 300, //事件
                    timingFunction: 'linear'  //运动曲线
                })
                console.log('animation', animation)
                if (_this.courseType) {
                    animation.rotate(90).step()
                } else {
                    animation.rotate(0).step()
                }
                this.animations = animation  //赋值
            },
	}
}
</script>

好了, 到此结束, 仅作为个人参考, 也希望可以帮到大家. 如有不对， 欢迎评论区留言指正^-^。