鸿蒙HarmonyOS实战:通过设置插值器来实现动画效果

时间:2025-04-04 07:29:03
  • //
  • import animator from '@';
  • import promptAction from '@';
  • export default {
  • data: {
  • scaleVal:1,
  • DivWidth:200,
  • DivHeight:200,
  • translateVal:0,
  • animation: null
  • },
  • onInit() {
  • var options = {
  • duration: 3000,
  • fill: 'forwards',
  • begin: 200,
  • end: 270
  • };
  • = (options);
  • },
  • onShow() {
  • var _this= this;
  • //添加动画重放事件
  • = function() {
  • ({
  • message: 'repeat'
  • });
  • var repeatoptions = {
  • duration: 2000,
  • iterations: 1,
  • direction: 'alternate',
  • begin: 180,
  • end: 240
  • };
  • _this.(repeatoptions);
  • _this.();
  • };
  • },
  • playAnimation() {
  • var _this= this;
  • //添加动画逐帧插值回调事件
  • = function(value) {
  • _this. scaleVal= value/150,
  • _this.DivWidth = value,
  • _this.DivHeight = value,
  • _this.translateVal = value-180
  • };
  • ();
  • },
  • updateAnimation() {
  • var newoptions = {
  • duration: 5000,
  • iterations: 2,
  • begin: 120,
  • end: 180
  • };
  • (newoptions);
  • ();//调用动画播放接口
  • },
  • pauseAnimation() {
  • ();//调用动画暂停接口
  • },
  • finishAnimation() {
  • var _this= this;
  • //添加动画完成事件
  • = function() {
  • ({
  • message: 'finish'
  • })
  • };
  • (); //调用动画完成接口
  • },
  • cancelAnimation() {
  • .cancel(); //调用动画取消接口
  • },
  • reverseAnimation() {
  • (); //调用动画倒放接口
  • }
  • }