web原子操作

飞道科技

@dfeidao/atom-web > animation动画

External module: animation动画

Index

Functions

Functions

anim

▸ anim(node: HTMLElement, property: Partial<IAnimationProperty>, properties: Hash<Partial<IAnimationProperties», evt?: Partial<IAnimationEvent>): IAnimation

Defined in animation/anim.ts:48

生成动画对象

see: api

requires: 使用本原子操作需要在package.json中devDependencies下加入"@dfeidao/animation":"@version"; @version 为该模块的版本号,可以在这里查询

example:

import anim from '@dfeidao/atom-web/animation/anim';
anim(node, {
        repeat: 0,
        duration: 1000,
        units: 'px',
        delay: 0,
        easing: 'ease',
        precent: 0
    }, {
        left :{
            begin:0,
            end:100
        }
    }, evt);

Parameters:

Name Type Description
node HTMLElement 节点对象
property Partial<IAnimationProperty> IanimationProperty属性 { repeat: number; 重复次数 duration: number; 动画持续时长 单位是ms units: string; 数值单位，默认为’px’ delay: number; 动画延迟时长 单位是ms easing: string; 动画效果 默认为’ease’ precent: number; 动画暂停时长 单位是ms }
properties Hash<Partial<IAnimationProperties» Hash属性 { (要变化的元素例)left: { start?: T | ((n: HTMLElement) => T),开始位置, end?: T | ((n: HTMLElement) => T),结束位置 } }
Optional evt Partial<IAnimationEvent>  

Returns: IAnimation Ianimation 动画对象

chain

▸ chain(anims: IAnimation[], evt?: Partial<IAnimationEvent>, repeat?: undefined | number): IChainAnimation

Defined in animation/chain.ts:28

串联动画

see: api

requires: 使用本原子操作需要在package.json中devDependencies下加入"@dfeidao/animation":"@version"; @version 为该模块的版本号,可以在这里查询

example:

import anim from '@dfeidao/atom-web/animation/anim';
import chain from '@dfeidao/atom-web/animation/chain';
import play from '@dfeidao/atom-web/animation/play';
const anim1 = anim(node, property, properties, evt); // 参数详见anim
const anim2 = anim(node, property, properties, evt);
const anims = new Array(anim1,anim2);
const _chain = chain(anims, evt, repeat);
play(_chain);

Parameters:

Name Type Description
anims IAnimation[] IAnimation[] 多个动画对象 参数详见anim
Optional evt Partial<IAnimationEvent>  
Optional repeat undefined | number  

Returns: IChainAnimation 无

combine

▸ combine(anims: IAnimation[], evt?: Partial<IAnimationEvent>, repeat?: undefined | number): ICombineAnimation

Defined in animation/combile.ts:28

同步动画

see: api

requires: 使用本原子操作需要在package.json中devDependencies下加入"@dfeidao/animation":"@version"; @version 为该模块的版本号,可以在这里查询

example:

import anim from '@dfeidao/atom-web/animation/anim';
import chain from '@dfeidao/atom-web/animation/chain';
import play from '@dfeidao/atom-web/animation/play';
const anim1 = anim(node, property, properties, evt); // 参数详见anim
const anim2 = anim(node, property, properties, evt);
const anims = new Array(anim1,anim2);
const _combine = combine(anims, evt, repeat);
play(_combine);

Parameters:

Name Type Description
anims IAnimation[] IAnimation[] 多个动画对象 参数详见anim
Optional evt Partial<IAnimationEvent> IAnimation 事件 可选项(play:动画开始回调事件,stop:动画停止回调事件,pause:动画暂停回调事件,end:动画结束回调事件)
Optional repeat undefined | number 重复次数 可选

Returns: ICombineAnimation 无

play

▸ play(anim: IAnimation | IChainAnimation | ICombineAnimation, delay?: undefined | number): void

Defined in animation/play.ts:23

执行动画

see: api

requires: 使用本原子操作需要在package.json中devDependencies下加入"@dfeidao/animation":"@version"; @version 为该模块的版本号,可以在这里查询

example:

import anim from '@dfeidao/atom-web/animation/anim';
import play from '@dfeidao/atom-web/animation/play';
const _anim = anim(node,property,properties,evt); // 参数详见anim
play(_anim, delay);

Parameters:

Name Type Description
anim IAnimation | IChainAnimation | ICombineAnimation IAnimation | IChainAnimation | ICombineAnimation 动画对象 参数详见anim
Optional delay undefined | number 延迟时长 可选项

Returns: void 无