开天辟地 HarmonyOS(鸿蒙) - 动画: 路径动画

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 动画: 路径动画

示例如下:

pages\animation\MotionPathDemo.ets

/*
 * 路径动画
 *
 * motionPath() - 设置位移动画时的运动路径
 */

import { TitleBar } from '../TitleBar'

@Entry
@Component
struct MotionPathDemo {

  @State translateY: number = 0

  build() {
    Column({space:20}) {
      TitleBar()

      Path({ width: 200, height: 200 })
        .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
        .stroke(Color.Red)
        .strokeWidth(1)
        .fill(Color.Transparent)

      Button('button')
        .translate({ y: this.translateY })
        /*
         * motionPath() - 设置位移动画时的运动路径
         *   path - 路径,其与 svg(Scalable Vector Graphics) 的 path 是一样的
         *   from - 路径起点(0 - 1 之间)
         *   to - 路径终点(0 - 1 之间)
         *   rotatable - 组件在动画过程中是否跟随路径进行旋转
         */
        .motionPath({
          path: 'M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z',
          from: 0.0,
          to: 1.0,
          rotatable: true
        })
        .onClick(() => {
          animateTo({
            duration: 10000,
            curve: Curve.Linear,
            iterations: -1
          }, () => {
            // 这句是为了启动动画
            this.translateY = 1
          })
        })
    }
  }
}


源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @   webabcd  阅读(8)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2012-02-06 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
点击右上角即可分享
微信分享提示