PixiJs Martial arts figures slide in and out of animation

Alloytouch. Js, Timelinemax.js, TimelineMax.. Js, the user needs to trigger the timeline by sliding the hand to change the changes of the Sprite, which is the way to play in one shot to the end.

Step 1: Create the project and import 4JS files

Step 2: Import images

http://dongyuan.juzhen02.com/2019/dy0426/images/sjg1.png
Copy the code

Step 3: Create the stage

const w = document.body.clientWidth,  
     h = document.body.clientHeight;
     let app = new PIXI.Application({width: w, height: h});
Copy the code

Step 4: Load resources

const loader = new PIXI.loaders.Loader();
loader.add('sjg1'.'imgs/sjg1.png')
Copy the code

Step 5: Load the progress, complete the load, and add the stage to the body

loader.on("progress".function(target, resource) {// Load progress console.log(target.progress+"%")}); loader.once('complete'.function(target, the resource) {/ / loaded document. The body. The appendChild (app. View)}); loader.load(); // Start loading resourcesCopy the code

Step 6: Create sprites

const sprite = {}
sprite.sjg1 = new PIXI.Sprite.fromImage('sjg1') sprite.sjg1.position.set(w/2,h/2) sprite.sjg1.alpha = 0; Sprite. Sjg1. Anchor. Set (0.5, 0.5) app. Stage. The addChild (Sprite. Sjg1);Copy the code

Step 7: Create a timeline

let allTimeLine = new TimelineMax({
    paused:true// Default stop})let moveMinHeight = -app.stage.height; alloyTouch = new AlloyTouch({ touch:"body"// Feedback touch dom vertical:true, / /trueStands for monitor vertical touch,falseThe transverse min: moveMinMaxSpeed: 1, Max: 0, // Not required, maximum scrolling propertybindSelf: false,
    initialValue: 0,
    change:function(value){// Animation calculation progresslet myprogress = value / moveMin;
        allTimeLine.seek(myprogress)
    }
 })
Copy the code

Step 8: Write an animation

// SubtimelineletTimeline1 = new TimelineMax({delay:0.3 // to the position of 0.3 on the timeline, make the image transparent to opaque}) // AnimationletTweenMax1 = new TweenMax (Sprite. Sjg1, 0.1, {alpha: 1}); Timeline1. add(tweenMax1,0)// Add animation to frame 0 of the child timeline allTimeline. add(timeline1,0); // Add the child timeline to the main timelineCopy the code

The end of the

At this point, when you swipe up and down the screen, the little person goes from transparency 0 to transparency 1.