• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册

Popmotion/popmotion: Simple animation libraries for delightful user interfaces

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

Popmotion/popmotion

开源软件地址(OpenSource Url)：

https://github.com/Popmotion/popmotion

开源编程语言(OpenSource Language)：

JavaScript 69.4%

开源软件介绍(OpenSource Introduction)：

Popmotion

The animator's toolbox

npm version npm downloads Twitter Follow

Popmotion is:

  • Powerful: It supports keyframe and spring animations for numbers, colors and complex strings.
  • Low level: It's designed to be composable and portable into any JavaScript environment, with an eye on worklets in the future.
  • Stable: It's written in TypeScript and enjoys over 95% test coverage.
  • Tiny: animate is just ~4.5kb, and every function is individually importable.

Quick start

npm install popmotion
import { animate } from "popmotion"

animate({
  from: 0,
  to: 100,
  onUpdate: latest => console.log(latest)
})

Animation

animate

animate performs a keyframes or spring animation.

import { animate } from "popmotion"

animate({
  from: 0, 
  to: 100,
  onUpdate: latest => console.log(latest)
})

It can animate numbers:

animate({ from: 0, to: 100 })

Or strings of the same type:

animate({ from: "0px", to: "100px" })
animate({ from: "#fff", to: "#000" })

The strings can be pretty complex, for instance box shadows or SVG path definitions. The only limitation is that the numbers and colors contained within must be in the same order:

animate({
  from: "0px 0px 0px rgba(0, 0, 0, 0)",
  to: "10px 10px 0px rgba(0, 0, 0, 0.2)"
})

The type of animation performed will be automatically detected from the provided options, or can be chosen manually by defining type as "keyframes", "spring" or "decay".

Options

These options can be set for all animations:

from

An initial value to start the animation from.

Defaults to 0

animate({
  from: "linear-gradient(#e66465, #9198e5)",
  to: "linear-gradient(#9198e5, #e66465)"
})
elapsed

Sets an initial elapsed time, in milliseconds. Set to a negative value for a delay.

animate({
  to: 100,
  elapsed: -300
})
repeat

The number of times to repeat the animation. Set to Infinity to repeat forever.

animate({
  to: 100,
  repeat: 2
})
repeatDelay

The duration, in milliseconds, to wait before repeating the animation.

animate({
  to: 100,
  repeat: 2,
  repeatDelay: 200
})
repeatType

Either "loop", "mirror" or "reverse". Defaults to "loop".

  • "loop": Repeats the animation from 0.
  • "mirror": Swaps the from/to values alternately.
  • "reverse": Reverses the animation alternately.
animate({
  to: 100,
  repeat: 2,
  repeatType: "reverse"
})
driver

By default, the animation will be driven by a requestAnimationFrame loop. driver can specify a different source.

A Driver is a function that accepts the animations update function. This is a function that can be called with a time delta from the previous frame. The Driver must return a function that will be called when the animation is stopped.

const xrDriver = session => update => {
  let latestRequestId = 0
  let prevTimestamp = performance.now()
  
  const step = timestamp => {
    const delta = timestamp - prevTimestamp
    prevTimestamp = timestamp

    update(delta)

    latestRequestId = session.requestAnimationFrame(step)
  }

  let latestRequestId = session.requestAnimationFrame(step)

  return () => session.cancelRequestAnimationFrame(latestRequestId)
}

animate({
  to: 100,
  driver: xrDriver(xrSession)
})
type

animate will automatically detect the type of animation to use based on the options provided. But a specific type can be chosen manually by defining type as "keyframes", "spring" or "decay".

animate({
  to: 100,
  type: "spring"
})

Lifecycle events

The following lifecycle events are available for all animations:

onUpdate

This is called every frame the animation fires with the latest computed value.

animate({
  to: 100,
  onUpdate: latest => console.log(latest)
})
onPlay

This is called when the animation starts. Currently this automatically when animate is called.

animate({
  to: 100,
  onPlay: () => {}
})
onComplete

This is called when the animation successfully completes.

animate({
  to: 100,
  onComplete:() => {}
})
onRepeat

This is called when an animation repeats.

animate({
  to: 100,
  repeat: 2,
  onRepeat: () => {}
})
onStop

This is called when the animation is stopped by the stop control.

const animation = animate({
  to: 100,
  onStop: () => {}
})

animation.stop()

Keyframes options

A keyframes animation is the default animation type and it can be defined either with a from and to option:

animate({ from: 0, to: 100 })

Or as a series of keyframes provided to the to option:

animate({ to: [0, 100, 200] })
to

A single value to animate to, or an array of values to animate through.

animate({
  to: ["#0ff", "#f00", "#0f0"]
})

If to is an array, any defined from will be ignored.

duration

This defines the duration of the animation, in milliseconds.

animate({
  to: 100,
  duration: 300
})
ease

This is an easing function, or array of functions, to use when easing between each keyframe.

import { animate, linear, easeInOut } from "popmotion"

animate({
  to: 100,
  ease: linear
})

animate({
  to: ["#fff", "#000", "#f00"],
  ease: [linear, easeInOut]
})

If set as any array, the length of this array must be one shorter than the number of values being animated between.

offset

This is an array of values between 0 and 1 that defines at which point throughout the animation each keyframe should be reached.

This array should be the same length as the number of defined keyframes.

animate({
  to: ["#fff", "#000", "#f00"],
  offset: [0, 0.2, 1]
})

Spring options

Springs are great for creating natural-feeling interfaces and dynamic interruptable animations.

A spring animation will be used if any of the stiffness, damping or mass options are detected.

Note: A spring simulation is inherently numerical so if it's given a color, array or object, it runs the animation from 0 to 100 and interpolates that to the given values. This strategy is likely to be tweaked before the official release so animations made this way may change in feel.

to

A single value to animate to.

animate({
  to: 100,
  type: "spring"
})

If to is an array, any defined from will be ignored.

stiffness

This defines the stiffness of the spring. A higher stiffness will result in a snappier animation.

Defaults to 100

animate({
  to: 100,
  stiffness: 1000
})
damping

This is the opposing force to stiffness. As you reduce this value, relative to stiffness, the spring will become bouncier and the animation will last longer. Likewise, higher relative values will have less bounciness and result in shorter animations.

Defaults to 10

animate({
  to: 100,
  damping: 50
})
mass

This is the mass of the animating object. Heavier objects will take longer to speed up and slow down.

Defaults to 1.

animate({
  to: 100,
  mass: 2
})
velocity

The initial velocity, in units per second, of the animation.

animate({
  to: 100,
  velocity: 1000
})
duration

The duration of the spring, in milliseconds.

Will be overridden by stiffness, mass or damping.

animate({
  to: 100,
  duration: 1000
})
bounce

The bounciness of the spring, as a value between 0 and 1, where 0 is no bounce.

Will be overridden by stiffness, mass or damping.

animate({
  to: 100,
  bounce: 0.2
})
restDelta

The distance from the animation target at which the animation can be considered complete. When both restDelta and restSpeed are met, the animation completes.

animate({
  to: 100,
  restDelta: 0.5
})
restSpeed

The absolute velocity, in units per second, below which the animation can be considered complete. When both restDelta and restSpeed are met, the animation completes. Defaults to 10.

animate({
  to: 100,
  restSpeed: 5
})

Playback controls

animate returns PlaybackControls, which can be used to control the playback of the animation.

Currently this only includes a stop method, but may expand with more.

stop

Stops the animation.

const playback = animate({ from: 0, to: 100 })
playback.stop()

inertia

The inertia animation is used to gradually decelerate a number. Think smartphone scroll momentum.

Options

In addition to animate's from, onUpdate and onComplete options, inertia also supports the following:

velocity

The initial velocity, in units per second, of the animation.

inertia({
  from: 0,
  velocity: 100
})
power

A constant with which to calculate a target value. Higher power = further target.

Defaults to 0.8.

inertia({
  from: 0,
  power: 0.3
})
timeConstant

Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel.

Defaults to 350.

inertia({
  from: 0,
  velocity: 100,
  timeConstant: 400
})
modifyTarget

A function that receives the calculated target and returns a new one. Useful for snapping the target to a grid.

const roundToNearest = target => v => Math.ceil(v / target) * target

inertia({
  from: 0,
  velocity: 100,
  modifyTarget: roundToNearest(100)
})
min

The minimum value at which the animation will switch from gradual deceleration and use a spring animation to snap to this point.

inertia({
  from: 50,
  velocity: -100,
  min: 0
})
More+
上一篇：
martynsmith/node-irc: NodeJS IRC client library发布时间：2022-08-15
下一篇：
givanz/VvvebJs: Drag and drop website builder javascript library.发布时间：2022-08-15
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap