Ձեր React հավելվածը կենդանացրեք անիմացիաներով

Ակտիվացրեք ձեր հավելվածը որոշ շարժումներով կամ ոճի այլ փոփոխություններով՝ օգտագործելով CSS անիմացիաները:

Անիմացիաները կարող են հիանալի միջոց լինել ձեր React հավելվածի օգտատերերի փորձը բարելավելու համար: Նրանք կարող են օգնել, որպեսզի փոխազդեցությունները ավելի հարթ լինեն, ինչպես նաև կարող են ապահովել տեսողական արձագանք կամ ուշադրություն հրավիրել որոշակի տարրի վրա:

Կան բազմաթիվ եղանակներ, որոնցով կարող եք աշխատել CSS անիմացիաների հետ՝ օգտագործելով React-ը, սկսած տեղական լուծումից մինչև երրորդ կողմի գրադարաններ:

Ինչու՞ օգտագործել անիմացիաներ React-ում:

Կան բազմաթիվ պատճառներ, թե ինչու կարող եք ցանկանալ անիմացիաներ օգտագործել ձեր React հավելվածում: Ամենատարածված պատճառներից մի քանիսը ներառում են.

• Փոխազդեցությունները դարձնել ավելի բնական: Շարժապատկերները կարող են օգնել օգտատերերի փոխազդեցություններին ավելի բնական և հարթ դարձնել: Օրինակ, եթե դուք օգտագործում եք անջատիչ բաղադրիչ, կարող եք աշխուժացնել անջատման կոճակը «միացված» և «անջատված» վիճակների միջև: Մեկ այլ օրինակ է առաջընթացի գծերը, դուք կարող եք ստեղծել անիմացիոն առաջընթացի տող ձեր react հավելվածի էջերի համար:
• Վիզուալ արձագանքի տրամադրում: Շարժապատկերները կարող են տեսողական արձագանք ապահովել օգտատիրոջը: Օրինակ, եթե օգտատերը սեղմում է կոճակը, դուք կարող եք անիմատացնել կոճակը՝ նշելով, որ հավելվածը գրանցել է այդ գործողությունը:
• Օգտատիրոջ ուշադրությունը ուղղորդել: Անիմացիաները կարող են ուղղորդել օգտվողի ուշադրությունը որոշակի տարրի վրա: Օրինակ, եթե դուք ունեք մոդալ երկխոսություն, որը հայտնվում է էկրանին, կարող եք օգտագործել անիմացիա՝ օգտատիրոջ ուշադրությունը դրա վրա հրավիրելու համար:
• Շտապողականության զգացում ստեղծելը: Շարժապատկերները կարող են հրատապության կամ կարևորության զգացում առաջացնել: Օրինակ, եթե դուք ունեք ժմչփի բաղադրիչ, որը հետհաշվարկ է կատարում, կարող եք օգտագործել անիմացիա՝ հրատապությունն արտացոլելու համար, քանի որ վերջնաժամկետը մոտենում է:

React բաղադրիչներին անիմացիա ավելացնելու մի քանի եղանակ կա: Երեքը, որոնց մասին դուք կսովորեք այստեղ օգտագործելու մասին, ներկառուցված ոճի անիմացիաներ են, react-animations գրադարանը և react-simple-animate գրադարանը:

Սկսեք ստեղծելով հիմնական react հավելված, ապա հետևեք ձեր ընտրած մեթոդին:

Մեթոդ 1. Օգտագործելով Inline Style Animations

Օրինակ, ենթադրենք, որ ցանկանում եք կենդանացնել բաղադրիչը, որպեսզի այն խամրի, երբ սեղմում եք կոճակը: Դուք կարող եք դա անել հետևյալ կոդով.

import React, { Component } from 'react';
 
class FadeInOut extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      isVisible: false
    };
  }
 
  render() {
    const styles = {
      opacity: this.state.isVisible ? 1 : 0,
      transition: 'opacity 2s'
    };
 
    return (
      <div>
        <div style={styles}>
          Hello, world!
        </div>
        <button onClick={this.toggleVisibility}>
          Toggle
        </button>
      </div>
    );
  }
 
  toggleVisibility = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  }
}
 
export default FadeInOut;

Այս օրինակում ոճի օբյեկտն ունի անթափանցիկություն և անցումային հատկություններ: Անթափանցիկությունը 0 է, երբ բաղադրիչը տեսանելի չէ, և 1, երբ այն տեսանելի է: Անցումային հատկությունը «անթափանցիկություն 2s» է, որը կհանգեցնի անթափանցիկության անցման երկու վայրկյանի ընթացքում, երբ այն փոխվի:

Կոճակը փոխում է բաղադրիչի տեսանելիությունը: Երբ ինչ-որ մեկը սեղմում է կոճակը, isVisible վիճակի փոփոխականը թարմացվում է, և բաղադրիչը կթուլանա կամ կթուլանա՝ կախված իր ներկայիս վիճակից:

Մեթոդ 2. React-animations Library-ի օգտագործումը

React բաղադրիչներին անիմացիաներ ավելացնելու մեկ այլ միջոց է օգտագործել գրադարան, ինչպիսին է react-անիմացիան: Այս գրադարանը տրամադրում է նախապես սահմանված անիմացիաների մի շարք, որոնք կարող եք օգտագործել ձեր React բաղադրիչներում:

React-անիմացիան օգտագործելու համար նախ պետք է տեղադրել գրադարանը՝

npm install react-animations --save

Դուք նաև պետք է տեղադրեք աֆրոդիտը, որը կախված է ռեակտիվ անիմացիաներից.

npm install aphrodite --save

Գրադարանները տեղադրելուց հետո կարող եք ներմուծել այն անիմացիաները, որոնք ցանկանում եք օգտագործել.

import { fadeIn, fadeOut } from 'react-animations';

Այնուհետև կարող եք օգտագործել ձեր բաղադրիչների անիմացիաները.

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';
import { fadeIn, fadeOut } from 'react-animations';
 
const styles = StyleSheet.create({
  fadeIn: {
    animationName: fadeIn,
    animationDuration: '2s'
  },
  fadeOut: {
    animationName: fadeOut,
    animationDuration: '2s'
  }
});
 
class FadeInOut extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      isVisible: false
    };
  }
 
  render() {
    const className = this.state.isVisible ? css(styles.fadeIn) : css(styles.fadeOut);
 
    return (
      <div>
        <div className={className}>
          Hello, world!
        </div>
        <button onClick={this.toggleVisibility}>
          Toggle
        </button>
      </div>
    );
  }
 
  toggleVisibility = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  }
}
 
export default FadeInOut;

Այս օրինակը սկսվում է՝ ներմուծելով fadeIn և fadeOut անիմացիաները react-animations գրադարանից: Այնուհետև սահմանում է ոճերի օբյեկտ fadeIn և fadeOut անիմացիաներով, իսկ animationDuration-ը սահմանվում է երկու վայրկյան:

Կոճակը կփոխի բաղադրիչի տեսանելիությունը: Երբ ինչ-որ մեկը կտտացնում է այն, isVisible վիճակի փոփոխականը կթարմացվի, և բաղադրիչը կթուլանա կամ կթուլանա՝ կախված ներկայիս վիճակից:

Մեթոդ 3. Օգտագործելով react-simple-animate գրադարանը

React-simple-animate գրադարանը տրամադրում է React բաղադրիչներին անիմացիաներ ավելացնելու պարզ միջոց: Այն առաջարկում է դեկլարատիվ API, որը հեշտացնում է բարդ անիմացիաների սահմանումը:

Գրադարանից օգտվելու համար նախ անհրաժեշտ է տեղադրել այն.

npm install react-simple-animate --save

Այնուհետև կարող եք օգտագործել այն ձեր բաղադրիչներում.

import React, { Component } from 'react';
import { Animate, AnimateKeyframes} from "react-simple-animate";
 
class App extends Component {
  render() {
    return (
      <div>
        <Animate
          play
          start={{
            opacity: 0
          }}
          end={{
            opacity: 1
          }}
        >
          <div>
            Hello, world!
          </div>
        </Animate>
        <AnimateKeyframes
          play
          duration={2}
          keyframes={[
            { opacity: 0, transform: 'translateX(-100px)' },
            { opacity: 1, transform: 'translateX(0px)' }
          ]}
        >
          <div>
            Hello, world!
          </div>
        </AnimateKeyframes>
      </div>
    );
  }
}
 
export default App;

Animate բաղադրիչը մարում է div տարրում: Այն սկսվում է 0-ի անթափանցիկությամբ և ավարտվում է 1-ի անթափանցիկությամբ: Խաղի հենակետը դրված է true, ինչը կհանգեցնի անիմացիան ավտոմատ կերպով նվագարկվելու, երբ բաղադրիչը տեղադրվի:

AnimateKeyframes բաղադրիչը աշխուժացնում է div տարրը երկու վայրկյանի ընթացքում: Հիմնական կադրերի զանգվածը սահմանում է անիմացիայի սկզբի և ավարտի վիճակները: Առաջին առանցքային կադրի անթափանցիկությունը 0 է, իսկ translateX արժեքը՝ -100px: Երկրորդ առանցքային կադրի անթափանցիկությունը 1 է, իսկ translateX արժեքը՝ 0px:

Բարձրացնել օգտվողների ներգրավվածությունը անիմացիաներով

Այժմ դուք գիտեք որոշ ուղիներ, որոնցով կարող եք անիմացիաներ օգտագործել ձեր React հավելվածում: Դուք կարող եք օգտագործել անիմացիաներ՝ ձեր հավելվածի հետ օգտատերերի ներգրավվածությունը մեծացնելու համար:

Օրինակ, դուք կարող եք օգտագործել անիմացիա՝ օգտատերին առաջադրանքն ավարտելու համար պարգևատրելու համար: Սա կարող է լինել այնպիսի պարզ բան, ինչպիսին է կարճ «մանող» անիմացիա կամ ավելի բարդ անիմացիա, որը խաղում է, երբ օգտատերը ավարտում է խաղի մակարդակը:

Դուք կարող եք նաև անվճար տեղադրել ձեր React հավելվածը համացանցում՝ Github էջերի կամ Heroku-ի նման ծառայությունների միջոցով: