Introduction to the

With the rise and development of H5 application, interactive one-mirror to the end has gradually become a new favorite of advertising. This marketing method, which does not need to turn pages or hard switch scenes, can gradually lay out a certain process, a certain experience and a certain scene according to the development of time or story as the design inspiration.

The specific gameplay of one-shot H5 is varied, 99% of which have routines to follow, mainly including the following categories:

First, video

Show the full story or grand scene from the first view, and make the video well before incorporating it into your H5 work.

Long page class

The continuity of the whole can be highlighted by the movement of the X or Y axis, and creative forms such as parallax animation can be integrated on the basis of sliding up and down to the left and right, so as to enrich the layers of the picture and make the work more three-dimensional.

Three, three-dimensional shuttle class

Space shuttle or scene shuttle is realized by z-axis movement or painting in picture

One shot to the end sample collection

practice

At the end of this year, H5 Sanwa went home in the form of a long page. With the operation of right slide, the scene is presented frame by frame and animation also appears. Users and Sanwa experience two kinds of journey of going home during the Spring Festival together.

Pixi.js + tween.js + Animate

Experience qr code

Draw scene content — pixi.js

Create stages and renderers

Stage: All objects to be rendered must be connected to the stage to be displayed. The stage is at the bottom of the tree display structure and can be understood as the background.

Renderer: An area that is rendered using canvas or webGL

// Create a Container object: stage var objPixiContainer = new pixi.container (); Var pixiRender = new pixi.canvasRenderer (windowWidth, windowHeight); // Tell the renderer to render the stage pixiRender. Render (objPixiContainer);Copy the code

Create a Sprite

Picture objects are called sprites. You can control their position, size, and many other useful properties for creating interactive animated graphics. Pixi has a Sprite class, which is a generic way to create game sprites.

The loader object of Pixi can be used to preload images. The position property sets x and Y coordinates to accurately restore the design draft, and addChild is used to add it to the stage.

// Image preload pixi.loader.add ("https://p4.ssl.qhimg.com/t01f118b79154278482.png")
    .add("https://p1.ssl.qhimg.com/t01495e763abe4d0ce9.png")
    .on("progress".function() {/ /dosth when loading }) .load(loadingFinish); // The load completes the callbackfunction loadingFinish() {// create a Sprite var Sprite = new pixi.sprite (pixi.loader. Resources [)"https://p1.ssl.qhimg.com/t01495e763abe4d0ce9.png"].texture ); Sprite. Position. Set (290, 297) / / objPixiContainer added to the stage. The addChild (Sprite) / / render to the renderer pixiRender. Render (objPixiContainer); }Copy the code

Every time a Sprite is added or a Sprite moves, the stage needs to be re-rendered

function pageUpdate() {
    requestAnimationFrame(pageUpdate);
    pixiRender.render(objPixiContainer);
}
Copy the code

Time rolling

To achieve a clear background animation effect, we consider using relative displacement to achieve, the principle is to set different motion coefficients for different layers, when the user scratches the screen, produce unequal displacement, so as to produce a clear visual effect. The main calculation formula is as follows:

// p.data.position.x is the initial position of the element, p.data.speed is the motion coefficient (inconsistent), Distance is the movement displacement relative to the initial position p.x = p.data.position.x + (p.data.spee.x) * distance;Copy the code

Play animation continuously

Is realized by using PIXI. Extras. AnimatedSprite through animationSpeed precise control speed, the play/stop control play/pause, gotoAndStop fine the first frame, etc to meet the demand of dynamic effect of the design

// Declare the AnimatedSprite sequence frame var urlPadding ="https://p4.ssl.qhimg.com/d/inn/bdfcc19c48d8/",
  act_animate_bg_img_arr = [];
for (let $e = 0; $e < 2; $e++) {
  act_animate_bg_img_arr.push(urlPadding + "baba" + ($e + 1) + ".png"); } / var/elves Sprite = new PIXI. Extras. AnimatedSprite. FromImages (act_1_animate_bg_img_arr) / / elf added to the stage ObjPixiContainer. AddChild (sprite4) / / find sequence frame layer, on the corresponding position, and set the movement speed Sprite. AnimationSpeed = 0.1; // control the speed sprite.play(); // Play sequence frames automaticallyCopy the code

Multiple Scenario Management

We found that there are multiple scenes, and you can create multiple stages under objPixiContainer to manage multiple scenes

Var stageContainer = new pixiContainer(); // Multiple scenes (canvas)letscenes = [Act_1, Act_2, Act_3]; // Each scene is another stage, rendering the initial position and stage sprites in turnfor (letj = 0; j < scenes.length; j++) { scenes[j] = new pixiContainer(); scenes[j].pivot.set(act_sprites_list[j][0].position.x, 0); scenes[j].position.set(act_sprites_list[j][0].position.x, 0); } // Each actContainerArr assigns initial displacement and render background in turn. / / / / todo elves rendering scene objPixiContainer stage added to the background. The addChild (stageContainer); // Add each scene to the scene stagecontainer. addChild(Act_1, Act_2, Act_3);Copy the code

Scene switch — ScrollerJS

Multiple canvases, choose to use ScrollerJs to achieve the horizontal scrolling effect of canvases, the management of multiple canvases, we choose to abstract the data into objects, try to use circular implementation to reduce the amount of code.

Train of thought

When the user slides the screen with his finger, the scroll will be triggered. By listening to the scroll event, the event will be triggered at a certain distance of the scroll. The event parameters include location information, etc., according to the location information, the rendering content (canvas display and hide, picture position, etc.) will be determined.

implementation

First, we need to set the container height limit for the Scroller:

scrollerObj.setDimensions(clientWidth, clientHeight, contentWidth, contentHeight);
Copy the code

Then monitor the mouse scrolling distance in real time:

// Control the displacementfunctionScrollerCallback (left, top, zoom) {console.log(${left}.${top}`) / / current scene move relatively stageContainer position. X = - cur_X; stageContainer.position.y = -cur_Y; } var objScroller = new Scroller(scrollerCallback, { zooming:false,
    animating: true,
    bouncing: false,
    animationDuration: 1000
});
objScroller.__enableScrollY = true;
Copy the code

We also need to associate the scroll area with the renderer

objPixiContainer.on("touchstart", onTouchStart)
    .on("touchmove", onTouchMove)
    .on("touchend", onTouchEnd);

function onTouchStart(e) {
    var i = e.data.originalEvent;
    isTouching = true;
    objScroller.doTouchStart(i.touches, i.timeStamp);
}

function onTouchMove(e) {
    if(isTouching) { var i = e.data.originalEvent; objScroller.doTouchMove(i.touches, i.timeStamp, i.scale); }}function onTouchEnd(e) {
    var i = e.data.originalEvent;
    objScroller.doTouchEnd(i.timeStamp);
    isTouching = false;
}
Copy the code

Animation – TweenJS

Animation effect implementation ideas:

  • Dynamic effects can be retrospectively rendered frame-by-frame using AnimatedSprite + ScrollerJS combined with relative displacement.
  • TweenJs cannot be used to populate the implementation without interruption.

TweenJS, similar to jQuery’s Animate method and CSS3 animation, defines the start and end states and time, and the transition states are automatically filled with tweenJS easing effects

new TWEEN.Tween({ y: 34 })
    .to({ y: 54 }, 1000)
    .onUpdate(function () {
     //
    })
    .start()
Copy the code

Automatic scaling

The old way of writing it

objPixiContainer.scale.set(screenScaleRito, screenScaleRito); pixiRender.resize(windowWidth, windowHeight); // Screen width and heightCopy the code

Zooming causes the image to blur. Change resolution to 2

objPixiContainer.scale.set(screenScaleRito, screenScaleRito); pixiRender.resize(windowHeight / screenScaleRito, 720); High/wide/design draft pixiRender. View. Style. The width = windowHeight/screenScaleRito +'px'; High/wide/design draft pixiRender. View. Style. Height = 720 +'px';
Copy the code