import { SceneItem , AnimatorState , Frame , SceneItemOptions } from "scenejs" ; import { IObject , isArray , splitUnit } from "@daybrush/utils" ; import { EffectState , KineticType } from "./types" ; import { getKeyframes } from "keyframer" ; namespace memberof private param param example function set ( property , values , options ) { const item = new SceneItem ( { } , options ) ; const length = values . length ; for ( let i = 0 ; i < length ; ++ i ) { item . set ( `${ i / ( length - 1 ) * 100 }%` , property , values [ i ] ) ; } return item ; } memberof param options param { number } options . from param { number } options . to param { number } options . duration example export function zoomIn ( { from = 0 , to = 1 } = { } ) { return set ( [ "transform" , "scale" ] , [ from , to ] , arguments [ 0 ] ) ; } memberof param options param { number } options . from param { number } options . to param { number } options . duration example export function zoomOut ( { from = 1 , to = 0 } = { } ) { return set ( [ "transform" , "scale" ] , [ from , to ] , arguments [ 0 ] ) ; } memberof param options param { string | string [ ] } options . property param { number | string } options . from param { number | string } options . to param { number } options . duration example export function wipeIn ( { from = "-100%" , to = "0%" , property = "left" } = { } ) { return set ( property , [ from , to ] , arguments [ 0 ] ) ; } memberof param options param { string | string [ ] } options . property param { number | string } options . from param { number | string } options . to param { number } options . duration example export function wipeOut ( { from = "0%" , to = "100%" , property = "left" } = { } ) { return set ( property , [ from , to ] , arguments [ 0 ] ) ; } memberof param param param example export function transition ( item1 , item2 , transitionObject ) { const transitionItem = new SceneItem ( ) ; transitionItem . append ( transitionObject ) ; const duration = transitionItem . getDuration ( ) ; const transitionTime = Math . max ( item1 . getDuration ( ) - duration , 0 ) ; item1 . set ( { [ transitionTime ] : transitionItem , } ) ; transitionItem . setDirection ( "reverse" ) ; item2 . set ( { 0 : transitionItem , } ) ; } memberof param options param { number } options . from param { number } options . to param { number } options . duration example export function fadeIn ( { from = 0 , to = 1 } = { } ) { return set ( "opacity" , [ from , to ] , arguments [ 0 ] ) ; } memberof param options param { number } options . from param { number } options . to param { number } options . duration example export function fadeOut ( { from = 1 , to = 0 } = { } ) { return set ( "opacity" , [ from , to ] , arguments [ 0 ] ) ; } memberof param options param { number } options . from param { number } options . to param { number } options . duration example export function blink ( { from = 0 , to = 1 } = { } ) { return set ( "opacity" , [ from , to , from ] , arguments [ 0 ] ) ; } memberof param options param { number } options . x param { number } options . y param { boolean } options . backside example export function flip ( { x = 1 , y = 1 , backside = false , } = { } ) { const item = new SceneItem ( { } , arguments [ 0 ] ) ; let property = "" ; let startValue = "" ; let endValue = "" ; const ratio = ( x && y ) || x ? x : y ; const startDeg = ( backside ? ( ratio > 0 ? 180 : - 180 ) : 0 ) ; const endDeg = startDeg + ratio * 180 ; if ( x && y ) { const axis = [ x > 0 ? 1 : - 1 , y > 0 ? 1 : - 1 , 0 , "" ] . join ( "," ) ; property = "rotate3d" ; startValue = axis + startDeg + "deg" ; endValue = axis + endDeg + "deg" ; } else { if ( x ) { property = "rotateX" ; } else if ( y ) { property = "rotateY" ; } else { return item ; } startValue = startDeg + "deg" ; endValue = endDeg + "deg" ; } item . set ( { transform : { [ property ] : [ startValue , endValue ] , } , } ) ; return item ; } memberof param options param { number } options . x param { boolean } options . backside example export function flipX ( { x = 1 , backside = false , } = { } ) { const item = flip ( { y : 0 , x , backside } ) ; item . setOptions ( arguments [ 0 ] ) ; return item ; } memberof param options param { number } options . y param { boolean } options . backside example export function flipY ( { y = 1 , backside = false , } = { } ) { const item = flip ( { x : 0 , y , backside } ) ; item . setOptions ( arguments [ 0 ] ) ; return item ; } memberof param options param { object | string } options . properties param { number } options . frequency example export function shake ( { properties = { transform : { translateX : [ `-10px` , `10px` ] , translateY : [ `-10px` , `10px` ] , rotate : [ `-10deg` , `10deg` ] , } , } , frequency = 10 , } = { } ) { const item = new SceneItem ( { } , arguments [ 0 ] ) ; const frame = new Frame ( properties ) ; const names = frame . getNames ( ) ; names . forEach ( ( propertyNames , i ) => { const value = frame . get ( ... propertyNames ) ; let start = 0 ; let end = 0 ; let unit = "" ; if ( isArray ( value ) ) { const { value : startNumber , unit : startUnit } = splitUnit ( value [ 0 ] ) ; unit = startUnit ; start = startNumber ; end = splitUnit ( value [ 1 ] ) . value ; } else { const { value : valueNumber , unit : valueUnit } = splitUnit ( value ) ; unit = valueUnit ; end = Math . abs ( valueNumber ) ; start = - end ; } item . set ( `0%` , ... propertyNames , `${ ( start + end ) / 2 }${ unit }` ) ; item . set ( `100%` , ... propertyNames , `${ ( start + end ) / 2 }${ unit }` ) ; for ( let j = 1 ; j <= frequency ; ++ j ) { const ratio = Math . random ( ) * ( end - start ) + start ; item . set ( `${ j / ( frequency + 1 ) * 100 }%` , ... propertyNames , `${ ratio }${ unit }` ) ; } } ) ; return item ; } memberof param options param { string | string [ ] } options . x param { number } options . frequency example export function shakeX ( { x = [ "-5px" , "5px" ] , frequency = 10 , } = { } ) { const item = shake ( { properties : { transform : { translateX : x , } , } , frequency , } ) ; item . setOptions ( arguments [ 0 ] ) ; return item ; } memberof param options param { string | string [ ] } options . y param { number } options . frequency example export function shakeY ( { y = [ "-5px" , "5px" ] , frequency = 10 , } = { } ) { const item = shake ( { properties : { transform : { translateY : y , } , } , frequency , } ) ; item . setOptions ( arguments [ 0 ] ) ; return item ; } see https param param memberof example export function keyframer ( name , options ) { return new SceneItem ( getKeyframes ( name ) , options ) ; } memberof param options param { string | string [ ] } options . leftProperty param { string | string [ ] } options . topProperty param { string | number } options . left param { string | number } options . top example export function kineticFrame ( { leftProperty = [ "transform" , "translateX" ] , topProperty = [ "transform" , "translateY" ] , left = "0px" , top = "0px" , } = { } ) { const frame = new Frame ( ) ; frame . set ( ... [ ] . concat ( leftProperty ) , left ) ; frame . set ( ... [ ] . concat ( topProperty ) , top ) ; frame . set ( "transform-origin" , `calc(50% - ${ left }) calc(50% - ${ top })` ) ; return frame ; } memberof param options param { string | string [ ] } options . property param { string } options . text param { number } options . start param { number } options . end param { number } options . prefix param { number } options . suffix example export function typing ( { property = [ "html" ] , text = "" , start = 0 , end = text . length , prefix = "" , suffix = "" , } = { } ) { const properties = [ ] . concat ( property ) ; const item = new SceneItem ( ) ; const length = Math . abs ( end - start ) + 1 ; if ( start < end ) { for ( let i = start ; i <= end ; ++ i ) { item . set ( `${ ( i - start ) / length * 100 }%` , ... properties , `${ prefix }${ text . substring ( start , i ) }${ suffix }` ) ; } } else { for ( let i = end ; i <= start ; ++ i ) { item . set ( `${ ( i - end ) / length * 100 }%` , ... properties , `${ prefix }text.substring(end, start + end - i)${ suffix }` ) ; } } item . setOptions ( arguments [ 0 ] ) ; return item ; }