微信小程序 Animation 动画实践
2019-05-25 本文已影响0人
夏海峰
效果演示
手动实现一个营销活动的动画效果，如上图示。当点击图中的“立即合成”让五个数字旋转一圈，同时让白色的圆圈和五个箭头的透明度加亮，三秒后整个图形缩放至消失。接着弹出一个中奖提示的图片。
布局使用 transform: translate(x,y) 来实现，动画使用小程序官方 Animation 实现。具体代码如下：
<template>
<view class="compound">
<!-- 标题 -->
<view class="title">开奖啦，瓜分100万</view>
<!-- 动画盒子 -->
<view class="box">
<view class="circle" animation="{{animationData1}}"></view>
<view class="arrows" animation="{{animationData1}}">
<view class="arrow-1">
<image src="{{img.anArrows9}}"></image>
</view>
<view class="arrow-2">
<image src="{{img.anArrows5}}"></image>
</view>
<view class="arrow-3">
<image src="{{img.anArrows3}}"></image>
</view>
<view class="arrow-4">
<image src="{{img.anArrows2}}"></image>
</view>
<view class="arrow-5">
<image src="{{img.anArrows4}}"></image>
</view>
</view>
<view class="nums" animation="{{animationData2}}">
<view class="num1">1</view>
<view class="num2">2</view>
<view class="num3">3</view>
<view class="num4">4</view>
<view class="num5">5</view>
</view>
<view class="center" @tap="compound">
<image src="{{img.anCenter}}" ></image>
</view>
</view>
<!-- 卡片 -->
<view class="open" animation="{{animationData3}}">
<image src="../assets/open.png"></image>
</view>
</view>
</template>
<style lang="less">
.compound {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background:rgba(0,0,0,0.9);
.title {
margin: 0 auto;
text-align: center;
height:90rpx;
font-size:64rpx;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(255,255,255,1);
line-height:90rpx;
background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,238,174,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 110rpx;
padding-bottom: 60rpx;
}
.box {
width: 100%;
height: 750rpx;
position: relative;
overflow: hidden;
.circle {
position: absolute;
top: 50%;
left: 50%;
width: 540rpx;
height: 540rpx;
margin-left: -270rpx;
margin-top: -270rpx;
border-radius: 50%;
box-sizing: border-box;
border:4px solid rgba(220,220,220,1);
}
.nums {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
&>view {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 172rpx;
height: 172rpx;
margin-left: -86rpx;
margin-top: -86rpx;
background: #FF6347;
border-radius: 50%;
line-height: 172rpx;
text-align: center;
color: #ffffff;
font-size: 60rpx;
font-weight: bold;
}
&>.num1 {
transform: translate(0, -280rpx); // R＝280
}
&>.num2 {
transform: translate(266rpx, -87rpx); // R*cos(18), -R*sin(18)
}
&>.num3 {
transform: translate(165rpx, 226rpx); // R*sin(36), R*cos(36)
}
&>.num4 {
transform: translate(-165rpx, 226rpx); // 与3对称
}
&>.num5 {
transform: translate(-266rpx, -87rpx); // 与5对称
}
}
.arrows {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&>view {
position: absolute;
top: 50%;
left: 50%;
width: 102rpx;
height: 102rpx;
margin-top: -51rpx;
margin-left: -51rpx;
text-align: center;
line-height: 102rpx;
}
&>.arrow-1 {
transform: translate(0, -200rpx); // R=200
&>image {
display: inline-block;
vertical-align: middle;
width: 60rpx;
height: 82rpx;
}
}
&>.arrow-2 {
transform: translate(190rpx, -62rpx); // R*cos(18), -R*sin(18)
&>image {
display: inline-block;
vertical-align: middle;
width: 98rpx;
height: 84rpx;
}
}
&>.arrow-3 {
transform: translate(118rpx, 162rpx); // R*sin(36), R*cos(36)
&>image {
display: inline-block;
vertical-align: middle;
width: 98rpx;
height: 102rpx;
}
}
&>.arrow-4 {
transform: translate(-118rpx, 162rpx); // 与3对称
&>image {
display: inline-block;
vertical-align: middle;
width: 98rpx;
height: 102rpx;
}
}
&>.arrow-5 {
transform: translate(-190rpx, -62rpx); // 与5对称
&>image {
display: inline-block;
vertical-align: middle;
width: 98rpx;
height: 84rpx;
}
}
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 358rpx;
height: 358rpx;
margin-left: -179rpx;
margin-top: -179rpx;
&>image {
display: block;
width: 100%;
height: 100%;
}
}
}
.open {
position: absolute;
top: 50%;
left: 50%;
width: 490rpx;
height: 700rpx;
margin-top: -350rpx;
margin-left: -245rpx;
overflow: hidden;
&>image {
display: block;
width: 100%;
height: 100%;
}
}
}
</style>
<script>
import wepy from 'wepy'
import img from '@/assets'
export default class Compound extends wepy.page {
data = {
img: img,
animationData1: {}, // 三个动画栈
animationData2: {},
animationData3: {}
}
onShow() {
this.animation1 = wepy.createAnimation({timingFunction: 'ease', duration: 50})
this.animation2 = wepy.createAnimation({timingFunction: 'ease', duration: 50})
this.animation3 = wepy.createAnimation({timingFunction: 'ease', duration: 50})
// 初始化
this.animation1.opacity(0.2).step()
this.animation3.scale(0).step()
// 导出动画栈
this.animationData1 = this.animation1.export()
this.animationData2 = this.animation2.export()
this.animationData3 = this.animation3.export()
}
methods = {
// 点击“立即合成”
compound() {
this.animation1.opacity(1).step()
this.animation1.scale(0.1).step({duration: 2000, delay: 2900})
this.animation2.rotate(360).step({duration: 3000})
this.animation2.scale(0.1).step({duration: 2000})
this.animation3.scale(1.2).step({duration: 1000, delay: 4000})
this.animation3.scale(1).step({duration: 300})
// 导出动画栈
this.animationData1 = this.animation1.export()
this.animationData2 = this.animation2.export()
this.animationData3 = this.animation3.export()
}
}
}
</script>
资源推荐：CSS3 transform 属性，小程序 Animation
END 2019-05-25
