微信弹窗动画制作。

超、凢脫俗 2022-11-25 11:41 154阅读 0赞

众所周知，c3动画在页面加载后，不管元素是否隐藏，都会加载：

@keyframes myfirst { 
    	from { 
    		transform: translate(450rpx, 450rpx);
    	}
    	to{ 
    		transform: translate(94rpx, 292rpx);
    	}
    }
    @keyframes mysecond{ 
    	from { 
    		transform: translate(340rpx, 450rpx);
    	}
    	to{ 
    		transform: translate(340rpx, 480rpx);
    	}
    }
    @keyframes mythird{ 
    	from { 
    		transform: translate(250rpx, 250rpx);
    	}
    	to{ 
    		transform: translate(556rpx, 426rpx);
    	}
    }
    
    .s-frist{ 
    	 position: absolute;
    	 animation: myfirst 5s;
    	 animation-fill-mode: forwards; 
    }
    .s-second{ 
    	 position: absolute;
    	 animation: mysecond 5s;
    	 animation-fill-mode: forwards;  /*停留在最bai后一du帧*/
    }
    .s-third{ 
    	transform: translate(350rpx, 450rpx);
    	animation: mythird 5s;
    	animation-fill-mode: forwards;  /*停留在最bai后一du帧*/
    }
    <view class="s-frist" ></view>
    <view class="s-second"></view>
    <view class="s-third" ></view>

不多说了，一把辛酸泪，好在微信提供了动画属性，我们可以完美利用：`Animation wx.createAnimation`  
以下代码：

<view class="s-frist" animation="{ {animationData1}}"></view>
    <view class="s-second" animation="{ {animationData2}}"></view>
    <view class="s-third" animation="{ {animationData3}}"></view>
    
    .m-modal .content .s-frist{ 
    	position: absolute;
    	 transform: translate(350rpx, 450rpx);
    }
    .m-modal .content .s-second{ 
    	position: absolute;
    	transform: translate(350rpx, 450rpx);
    }
    .m-modal .content .s-third{ 
    	 transform: translate(350rpx, 450rpx);
    }
        data: { 
    		animationData1: { },
    		animationData2:{ },
    		animationData3:{ }
    		showModal: false,
    	  },
         openModal() { 
    			var vm = this;
    			vm.selectComponent("#tipLayer").layerToggle();
    			var animation1 = wx.createAnimation({ 
    				duration: 2000,
    				timingFunction: "linear",
    				delay: 0
    			})
    			var animation2 = wx.createAnimation({ 
    				duration: 2000,
    				timingFunction: "linear",
    				delay: 0
    			})
    			var animation3 = wx.createAnimation({ 
    				duration: 2000,
    				timingFunction: "linear",
    				delay: 0
    			})
    			vm.animation1 = animation1;
    			animation1.translate(47, 147).step()
    			vm.animation2 = animation2;
    			animation2.translate(175, 250).step()
    			vm.animation3 = animation3;
    			animation3.translate(320, 320).step()
    			
    			this.setData({ 
    				animationData1: animation1.export(),
    				animationData2:animation2.export(),
    				animationData3:animation3.export(),
    				showModal: true,
    			})
    		}