import { interpolateNumber } from "d3-interpolate" ; import { ANIME , EASE_TYPE } from "../cubicons/constants" ; import { ParamatricCurve , Line } from "../cubicons/geometry" ; import { Animation } from "./animation" ; /**
 * Let a line trace a curve.
 */ export class Trace extends Animation { /**
     * The curve.
     */ private curve : ParamatricCurve ; constructor ( params ) { super ( { cubicon : params . cubicon , duration : params . duration ?? ANIME . CREATE , ease : params . ease , } ) ; this . curve = params . curve ; } play ( sleepTime ) { this . tracing ( this . cubicon , sleepTime ) ; this . cubicon . elapsedTime += this . duration + sleepTime ; this . curve . elapsedTime += this . duration + sleepTime ; } private tracing ( cubicon , sleepTime ) { const lineLen = this . curve . def_cubiconBase . node ( ) . getTotalLength ( ) ; this . curve . def_cubiconBase . attr ( "stroke-dasharray" , lineLen + ", " + lineLen ) . attr ( "stroke-dashoffset" , lineLen ) ; this . curve . def_cubiconBase . transition ( ) . ease ( this . ease ) . delay ( cubicon . elapsedTime + sleepTime ) . duration ( this . duration ) . attrTween ( "stroke-dashoffset" , ( ) => { const interpolate = interpolateNumber ( lineLen , 0 ) ; return ( t ) => { const currentPoint = this . curve . def_cubiconBase . node ( ) . getPointAtLength ( t * lineLen ) ; cubicon . def_cubiconBase . attr ( "x2" , currentPoint . x ) . attr ( "y2" , currentPoint . y ) ; return interpolate ( t ) ; } ; } ) ; } }