애니메이션은 구름을 띄우는 애니메이션 예를 실현합니다.

이 기사의 예에서는 떠다니는 구름 효과를 달성하기 위한 WeChat 애플릿 개발의 애니메이션 루프 animation을 설명합니다.

애니메이션 인스턴스 애니메이션을 만듭니다. 인스턴스의 메서드를 호출하여 애니메이션을 설명합니다. 마지막으로 애니메이션 데이터는 애니메이션 인스턴스의 내보내기 메서드를 통해 내보내지고 구성 요소의 애니메이션 속성 에 전달됩니다.

참고: 내보내기 메서드가 호출될 때마다 이전 애니메이션 작업이 지워집니다.

WeChat 애플릿은 애니메이션을 구현하는 API를 제공하지만 일회성 작업으로 재생할 수 없습니다. 아래는 WeChat 애플릿의 애니메이션을 사용하여 루프 애니메이션을 구현하는 장난감입니다. 모두가 실제 루프를 구현하는 더 나은 방법을 생각해낼 수 있기를 바랍니다. 이 루프 애니메이션은 js 스크립트의 setInterval을 통해 구현되기 때문에 장난감이라고 합니다만, 'setInterval'은 실제 작업에서 점점 더 심각한 지연을 경험하게 됩니다. 이는 js의 단일 스레드 작업 모드 때문입니다(for). 자세한 내용은 검색하시면 됩니다. 이 레벨에 대한 정보를 참고하세요) 애니메이션 갭이 너무 부드럽지 않으니 잠시 놀다가 구름이 뜨도록 합시다...

스크린샷은 다음과 같습니다.

구현 코드:

index.wxml

<view class="clouds">
   <image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image>
  </view>

index.js

onReady: function () {
  // 页面渲染完成
  // 实例化一个动画
  var that = this;
  var i = 0
  var ii = 0
  var animationData = wx.createAnimation({
   duration: 1000, // 默认为400   动画持续时间，单位ms
   timingFunction: 'ease-in-out',
   //transformOrigin: '4px 91px'
  });
  var animationCloudData = wx.createAnimation({
   duration: 1000, // 默认为400   动画持续时间，单位ms
   timingFunction: 'ease-in-out',
   //transformOrigin: '4px 91px'
  });
  // 顺序执行，当已经执行完上面的代码就会开启定时器
  // 循环执行代码
  //dotAnFun = setInterval(function () {});  
  /*setInterval(function () {
   // 动画脚本定义
   //animationData.rotate(6 * (++i)).step()
   //animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();
   animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });
   // 更新数据
   that.setData({
    // 导出动画示例
    animationData: animationData.export(),
    //animationCloudData: animationCloudData.export(),    
   })
   ++i;
   console.log(i);
  }.bind(that), 2000);//循环时间 这里1000是1秒
  */
  //动画的脚本定义必须每次都重新生成，不能放在循环外
  animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });
  // 更新数据
  that.setData({
   // 导出动画示例
   //animationData: animationData.export(),
   animationCloudData: animationCloudData.export(),
  })
  setInterval(function () {
   //动画的脚本定义必须每次都重新生成，不能放在循环外
   animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });
   // 更新数据
   that.setData({
    // 导出动画示例
    //animationData: animationData.export(),
    animationCloudData: animationCloudData.export(),
   })
   ++ii;
   console.log(ii);
  }.bind(that),10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错
}

index.wxss

.clouds{
 margin-top:320rpx; 
}
.yun1{
 width:320rpx;
 height: 120rpx;
}

위 내용은 애니메이션은 구름을 띄우는 애니메이션 예를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!