Resources needed

1. Computing Delaunay triangulation Simply understood as divided into triangles

2. TweenMax Animation Library

   Realization effect

extend

GSPA GreenSock Animation PlatForm Official website documents
1. TweenLite is a fast, lightweight and flexible animation tool based on GreenSock Animation Platform (GSAP).
2. TweenMax Extension TweenLite
3. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite and TimelineMax instances
4. TimelineMax extends TimelineLite to provide exactly the same functionality and useful (but unnecessary) functionality
5. Draggable provides the ability to drag, rotate, fold, and even scroll any DOM element by using a mouse or touch event.

TweenLite

• Constructor TweenLite (target: Object, duration: Number, vars: Object)

Target: When animating DOM elements, the target can be a single element, an array of elements, a jQuery object (or similar element) or a CSS selector string. 
duration: Unit second If useFrames: true is set in the vars parameter, frame is set
 vars: Optional parameters
        Delay: Delay unit seconds before Number animation starts
        easy: Slow-moving function, you can refer to it.
        Paused: Stop animation immediately after creating Boolean true
        immediateRender: Boolean usually starts rendering the next frame when animation is created, unless delay is set. Rendering can be set to true after animation creation is completed. Set to true in the default form()
        overwrite: String/integer controls other animations to cover the same target
            Parameter: "none"/0/false is not overridden 
                  "all"/1 Immediate Rewriting Object Existing Animation 
                  "auto"/2 Animation rewrites its own conflicting features when rendering overlaps or conflicts with a feature of the animation already running
                  "Curr" / 3 simply rewrites the activated animation, regardless of whether or not there is an attribute conflict
                  "All OnStart/4" is similar to `all', except that it waits until the rewriting logic is complete.
                  "preexisting"/5 first rendering animation kills the same goal as existing animation. For example, if three animations are created with delays of 10, 1, and 2, the third animation will rewrite the second animation.
        onComplete: Function animation call after completion
        onCompleteParams: Array transfers parameters to onComplete functions
        OnCompleteScope: Object `this` Direction
        onReverseComplete: The animation is inverted at the beginning.
        onReverseCompleteParams:
        onStart: Called at the beginning of the animation, when `time'changes from 0
        onStartParams: 
        onStartScope:
        onUpdate: Each frame call for animation in active state
        onUpdateParams:
        onUpdateScope:
        useFrames: Boolean true is based on frames rather than `duration'and `delay'.`
        lazy: Boolean avoids read and write performance problems
        onOverwrite: Function animation is called when overwritten
        AutoCSS: Optimizing the attributes automatically when using css in Boolean vars
        CallbackScope: Scope of Object callbacks

• Properties attributes

.data:
TweenLite.defaultEase: Default `Power1. easeOutOut'.`
TweenLite.defaultOverwrite: Default `auto'`
TweenLite.onOverwrite: Function parameter overwrittenTween overwritingTween target overwrittenProperties
 TweenLite.selector: similar to document.getElementById()
target: Read Only
 TweenLite.ticker: Scheduling ticker events when engine updates
 timeline: Read-only 
vars: Read-Only

• Method Method Method

.delay(value:Number): Get or set delay
TweenLite.delayedCall(delay:Number,callback:Function,params:Array,scpre:*,useFrames:Boolean): 
.duration(value:Number):
.endTime(includerPepeat:Boolean):
eventCallback(type:String,callback:Function,params:Array,scope:*):
TweenLite.from( target:Object, duration:Number, vars:Object):
TweenLite.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object):
TweenLite.getTweenOf(target:*, onlyActive:Boolean):
.invalidate(): Start of refreshing all internal records/End value, if you want to restart the animation without restoring to the starting value of any previous record
.isActive():
.kill(vars:Object, target:Object)
TweenLite.killDelayedCallTo(func:Function):
TweenLite.killTweenOf(target:Object, onlyActive:Boolean, vars:Object):
TweenLite.lagSmoothing(threshold:Number, adjustedLag:Number): Allows you to control the time between the two ticks (updates) of the engine
.pause(atTime:*, suppressEvents:Boolean): If sotrue(Default value), when the playback head moves to atTime When a new location is defined in a parameter, no event or callback is triggered
.paused(value:Boolean):
.play(from:*, suppressEvents:Boolean):
.progress( value:Number, suppressEvents:Boolean):
TweenLite.render(): If you set up a bunch from()Make up the room, and then you need to force immediate rendering
.restart( includeDelay:Boolean, suppressEvents:Boolean ):
.resume(from:*, suppressEvents:Boolean):
.reverse(from:*, suppressEvents:Boolean):
.reversed(value:Boolean):
.seek(time:*, suppressEvents:Boolean):
TweenLite.set(target:Object, vars:Object):
.startTime(value:Number):
.time(value:Number, suppressEvents:Boolean):
.timeScale(value:Number): A factor used to scale time in animation, where1 =Normal speed (default)0.5 =Half speed,2 =Speed and so on
TweenLite.to(target:Object, duration:Number, vars:Object):
.totalDuration(value:Number): Only in TweenMax and TimelineMax Available in
.totalProgress(value:Number, suppressEvents:Boolean): Gets or sets the total progress of the animation, which is somewhere between0and1Value between
.totalTime(time:Number, suppressEvents:Boolean):Only in TweenMax and TimelineMax Available in