npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuke-animated

v0.2.2

Published

动画

Downloads

9

Readme

Animated

  • category: API
  • chinese: 动画
  • type: API

** 注意,这个动画库体积非常庞大, 建议使用 Transition 代替 **

API

Animated 用来创造流畅、强大、并且易于构建和维护的动画。

只有声明为可动画化的组件才能被关联动画。比如: View、Text,还有Image都是可动画化的。

属性:

  • Value: AnimatedValue

    • 表示一个数值的类,用于驱动动画;
    • 通常用new Animated.Value(0);来初始化。
  • ValueXY: AnimatedValueXY

    • 表示一个2D值的类,用来驱动2D动画,例如拖动操作等。

方法:

  • static decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig)

    • 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。
  • static timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig)

    • 推动一个值按照一个过渡曲线而随时间变化。Easing模块定义了一大堆曲线,你也可以使用你自己的函数。
  • static spring(value: AnimatedValue | AnimatedValueXY, config: SpringAnimationConfig)

    • 产生一个基于Rebound和Origami实现的Spring动画。它会在toValue值更新的同时跟踪当前的速度状态,以确保动画连贯。可以链式调用。
  • static add(a: Animated, b: Animated)

    • 将两个动画值相加计算,创建一个新的动画值。
  • static multiply(a: Animated, b: Animated)

    • 将两个动画值相乘计算,创建一个新的动画值。
  • static delay(time: number)

    • 在指定的延迟之后开始动画。
  • static sequence(animations: Array)

    • 按顺序执行一个动画数组里的动画,等待一个完成后再执行下一个。如果当前的动画被中止,后面的动画则不会继续执行。
  • static parallel(animations: Array, config?: ParallelConfig)

    • 同时开始一个动画数组里的全部动画。默认情况下,如果有任何一个动画停止了,其余的也会被停止。你可以通过stopTogether选项来改变这个效果。
  • static stagger(time: number, animations: Array)

    • 一个动画数组,里面的动画有可能会同时执行(重叠),不过会以指定的延迟来开始。用来制作拖尾效果非常合适。
  • static event(argMapping: Array, config?: EventConfig)

    • 接受一个映射的数组,对应的解开每个值,然后调用所有对应的输出的setValue方法。
    • 例如:
 onScroll={this.AnimatedEvent(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}]
   {listener},          // 可选的异步监听函数
 )
 ...
 onPanResponderMove: this.AnimatedEvent([
   null,                // 忽略原始事件
   {dx: this._panX},    // 手势状态参数
 ]),