从微信小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。

在页面或自定义组件中，当需要进行关键帧动画时，可以使用 this.animate 接口（官方API文档链接地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html）

this.animate(selector, keyframes, duration, callback)

参数说明

属性	类型	默认值	必填	说明
selector	String	-	是	选择器（同 SelectorQuery.select 的选择器格式）
keyframes	Array	-	是	关键帧信息
duration	Number	-	是	动画持续时长（毫秒为单位）
callback	function	-	否	动画完成后的回调函数

实现3D围绕圆心旋转动画

以下只贴部分关键代码：

wxml

<view class="container">
	<view class="carousel" id="carousel_id">
		<view class="box" wx:for="{{items}}" wx:for-item="item" wx:for-index="index" wx:key="index" style="transform: rotateY({{index * 30}}deg) translateZ({{translateZ}});">
			<image src="{{item.pic}}" />
		</view>
	</view>
</view>

<button type="primary" bindtap="play" style="margin-top: 200rpx;">旋转</button>

wxss

.container {
	margin: 5% auto;
	width: 70px;
	height: 70px;
	position: relative;
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

.carousel {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	/* animation: rotation 10s infinite linear;
	-webkit-animation: rotation 10s infinite linear; */
}

.carousel:hover {
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

.carousel view {
	display: block;
	position: absolute;
	width: 70px;
	height: 70px;
	/* left: 10px; */
	top: 10px;
	background: #2262E6;
	overflow: hidden;
	border: solid 2px #07C160;
}

.box image {
	filter: grayscale(0);
	cursor: pointer;
	transition: all 0.3s ease 0s;
	width: 100%;
	height: 100%;
}

.box image:hover {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

@keyframes rotation {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(360deg);
	}
}

js

Page({
	data: {
		translateZ: '0px',

		items: [
			{ "name": "红酒杏鲍菇", "pic": "https://api.jisuapi.com/recipe/upload/20160719/120829_70383.jpg" },
			{ "name": "糖醋黄瓜丝", "pic": "https://api.jisuapi.com/recipe/upload/20160719/120712_61817.jpg" },
			{ "name": "泰式柠檬蒸鲈鱼", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115500_14721.jpg" },
			{ "name": "高升猪蹄", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115444_29920.jpg" },
			{ "name": "香辣鸡翅", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115425_38037.jpg" },
			{ "name": "凉拌脱骨猪蹄", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115424_58309.jpg" },
			{ "name": "酸菜炖猪蹄", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115421_63772.jpg" },
			{ "name": "土匪扣肉", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115415_32313.jpg" },
			{ "name": "牛仔骨烧土豆", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115414_82369.jpg" },
			{ "name": "豌豆玉米虾仁", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115406_21401.jpg" },
			{ "name": "西芹百合", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115355_78233.jpg" },
			{ "name": "猪骨炖冬瓜", "pic": "https://api.jisuapi.com/recipe/upload/20160719/115330_15534.jpg" }
		]
	},

	onLoad(options) {
		const that = this;

		wx.getSystemInfo({
			success: (res) => {
				that.setData({
					translateZ: (res.windowWidth / 2 - 20) + 'px'
				});
			}
		});
	},

	play() {
		this.animate('#carousel_id', [
			{ ease: 'ease', rotateY: 0 },
			{ ease: 'ease', rotateY: 3600 }
		], 5000, function () {
			console.log('回调成功，旋转结束');
		}.bind(this));
	}

});

效果如下

小程序动画API之this.animate()实现3D旋转

完整示例请扫描以下微信小程序二维码前往小程序【废话文学间】中#废话编程#之『干饭选择器』体验！