motion

Motion position.

It can be used together with motionPath, getMotionTotal(), and getMotionPoint().

Note

The Motion Path Plugin must be installed to use this feature. Additionally, path animation requires the Animation Plugin.

Or you can directly install leafer-game (which already includes both the animation and motion path plugins).

Key Properties

motion: number | IUnitData

Defines the element’s position along a motion path. Percentage values are supported. Defaults to empty.

rect.motion = {
  type: 'percent',
  value: 0.5, // 50%
}

motionRotation: number | boolean

Offset rotation along the motion path. Adds an extra angle on top of the path direction. Defaults to 0.

When the element moves, its rotation is automatically updated to match the path direction.

If set to false, the element’s rotation will not be modified.

Belongs to

UI Element

Example

// #运动路径 [自身描边动画]
import { Group, Leafer, Path, Rect } from 'leafer-ui'
import '@leafer-in/animate' // 导入动画插件
import '@leafer-in/motion-path' // 导入运动路径插件

const leafer = new Leafer({ view: window })

const group = new Group()

const path = new Path({
    x: 100,
    y: 100,
    scale: 0.2,
    motionPath: true, // 设置为运动路径，该 Group 内的其他元素都可以沿此路径运动
    stroke: '#32cd79',
    strokeWidth: 20,
    motion: 0,
    animation: {  // 沿 path 运动描边至 100% 
        style: { motion: { type: "percent", value: 1 } },
        duration: 9,
        loop: true
    },
    path: 'M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272z M351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856z M615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648z M491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z',
})

const pen = new Rect({
    width: 15,
    height: 50,
    cornerRadius: 10,
    fill: '#FEB027',
    around: 'bottom',
    motion: 0,
    motionRotation: 45,
    animation: { // 沿 path 运动至 100% 
        style: { motion: { type: "percent", value: 1 } },
        duration: 9,
        loop: true
    }
})

group.add(path)
group.add(pen)

leafer.add(group)