26

A different web experience in 8 bit React.js World

 3 years ago
source link: https://www.tuicool.com/articles/beymyy6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

FZFfMvU.png!web

Few layers, scroll event manipulations and of course famous movie and game characters. Live Demo

vyAFruB.gif

This document aims to explain how React World works.

There are 4 topics: withScroll , SceneObject , MainLayer and Player

withScroll

  • Scroll event handling and computing processes takes place within this component.
  • And re-adjust page height for scroll manipulation. (or fake scroll page)
  • withScroll is High Order Component(HOC) and provides onScrolling, scroll and scrollDirection datas to wrapped component . Also it covered whole App .

usage :

import withScroll from "./withScroll";

class wrappedComp ...{
    ...

    const {scroll,onScrolling,scrollDirection} = this.props

    ...
}

export default withScroll(wrappedComp);

withScroll props :

attribute type return onScrolling boolean true/false scroll float between [0-maxScroll] scrollDirection integer 0(right), 1(left)

SceneObject

IjeeIvu.png!web

  • I created a standard for inter-component compatibility. Then i called it SceneObject, like GameObject in Unity Game Engine.
  • Every components are derived from the SceneObject.
  • You can set component position, scale and rotation easily.

usage :

import SceneObject from "./SceneObject";

const Enemy = props => {
  return (
    <SceneObject
      name="Enemy"
      transform={{
        position: props.transform.position, //or {x:100,y:"50%"}
        scale: { x: 200, y: 203 }, //or {x:"100%,y:"100%"}
        rotation: 180,
        opacity: 1
      }}
      bgRepeat={false}
      color={"none"}
      imgUrl={enemyPicture}
      animation={props.canAnimate ? animateNow : ""}
    />
  );
};

export default Enemy;

SceneObject options :

option name format default transform position,scale & rotation object none transform.position left & bottom {x : any, y : any} unset transform.scale width & height {x : any, y : any} unset transform.rotation transform: rotate() numeric 0 opacity opacity numeric [0-1] unset color background-color html color none imgUrl background numeric none bgRepeat background-repeat boolean false animation animation css animation none

Main Layers

N3UfeqN.png!web

  • There are 3 main layers. Sky,Environment and Ground.
  • Scenes are defined in the main layers, so if main layer move whole scene will move.
  • Every main layer has a animations structure, like movement instructions.
  • The behavior related to scroll movement is defined in this structure.
  • Animations , includes start-finish scroll ranges and start-finish layer position.
  • Animation Calculation function calculates every scroll movement steps and returns the new position.

example of animation structure :

//...
this.animations = {
      //it will swipe ground layer -10000px on x axis at 0-5050 scroll range
      //wont move on y axis
      "0-5050": { position: { x: [0, -10000], y: [0, 0] } },

      //it will swipe ground layer -10000px to -15000 on x axis and
      //it will swipe ground layer 700px on x yxis at at 5050-7050 scroll range and,
      "5050-7050": { position: { x: [-10000, -15000], y: [0, 700] } },
    };
  }

  //will calculate when scroll change
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.scroll !== nextProps.scroll) {
      this.transform = AnimateCalculation(this.animations, nextProps.scroll);
      return true;
    }

    return false;
  }

Player

uuayqeB.png!web

  • Player is actually a main layer. But didn't move x or y axis.
  • Player includes 2 animations: hero/skin changing and jumping, and they defined in animation structure.

animations example in for jump

const animations = {
  //vader jumps
  "8000-8650": { startHeight: 200, endHeight: 100, type: "fall" },
  "8700-9320": { startHeight: 100, endHeight: 200, type: "jump" },
  "9370-9800": { startHeight: 200, endHeight: 100, type: "fall" },
...
}

animations example in hero/skin changing and walking

const heroes = {
  gandalf: {
    speed: 30,
    delimiter: 10, // speed / step
    frames: [
      [gandalf_01, gandalf_02, gandalf_03],
      [gandalf_11, gandalf_12, gandalf_13]
    ] //left - right
  }
  ...
}
...
const heroesShowUp = {
  "0-7050": { hero: "gandalf" },
  "7050-12100": { hero: "vader" },

I hope you enjoyed it

You can visit to Thanks List


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK