小程序基于雪碧图实现3d(横向全预览) ----组件

小程序、前端交流群：609690978

先上效果图（gif图略有卡顿，实际很流畅）：

准备条件：
雪碧图，规格：单图尺寸343*375，帧数45帧（如图）

上代码：
wxml

<wxs src="./animate.wxs" module="wxsFun" />
<view class="{
    { loadEnd ? 'active' : ''}}">
  <image
	src="{
    { value }}"
	class="slideImg"
	mode="heightFix"
	bindload="handleLoad"
	lazy-load="{
    { true }}"
	id="{
    { `slideImg${index}` }}"
    data-height="{
    {imgHeight}}"
    data-width="{
    {imgWidth}}"
    data-screenwidth="{
    {screenWidth}}"
    style="height:{
      {
      imgHeight}}rpx;width:{
      {
      imgWidth}}rpx;margin-top: -120rpx;"
    bindtouchstart='touchStart' 
    bindtouchmove='touchMove' 
    bindtouchend='touchEnd'
    change:prop="{
    {wxsFun.stepNext}}" 
    prop="{
    {animateFlag}}"
    change:load="{
    {wxsFun.loadend}}" 
    change:id="{
    {wxsFun.getId}}" 
    load="{
    {loadEnd}}"
    direct="{
    {direct}}"
    change:direct="{
    {wxsFun.stepOne}}"
  >image>
view>

js

Component({
   
   properties: {
   
    url: {
   
      value: '',
      type: String,
      observer: function (value) {
   
        if (this.data.value != value) {
   
          if (!this.data.value) {
   
            this.setData({
   
              loadEnd:<