5'da React Uygulamalarını Animasyonlandırmanın 2019 Harika Yolu

React uygulamalarında animasyon popüler ve tartışılan bir konudur. Gerçek şu ki, onu yaratmanın birçok yolu var. Bazı geliştiriciler CSS'yi HTML sınıflarına etiketler ekleyerek kullanır. Kullanmaya değer mükemmel bir yöntem. Ancak karmaşık animasyon türleriyle çalışmak istiyorsanız GreenSock'u öğrenmeye zaman ayırmaya değer; popüler ve güçlü bir platformdur. Animasyon oluşturmak için birçok kitaplık ve bileşen de vardır. Hadi onlar hakkında konuşalım.

Bu makalede React uygulamalarını canlandırmanın beş yolu anlatılmaktadır:

• css;
• ReactTransitionGroup;
• Tepki animasyonları;
• Tepki verme-ortaya çıkarma;
• TweenOne ve Ant Design.

Skillbox şunları önerir: Eğitici çevrimiçi kurs "Meslek Java geliştiricisi".
Hatırlatıyoruz: tüm "Habr" okuyucuları için - "Habr" promosyon kodunu kullanarak herhangi bir Skillbox kursuna kayıt olurken 10 ruble indirim.

Tüm örnekler mevcuttur depolar (Buradan itibaren orijinal makalede olduğu gibi makalenin içine resim yerine kaynaklar eklenmiştir).

CSS

Bu yöntem en başta tartışılmıştı ve gerçekten çok iyi. JavaScript kitaplıklarını içe aktarmak yerine onu kullanırsanız, derleme küçükse, tarayıcının çok fazla kaynağa ihtiyacı yoktur. Bu da elbette uygulama performansını etkiliyor. Animasyonunuzun nispeten basit olması gerekiyorsa bu yöntemi düşünün.

Örnek olarak burada animasyonlu bir menü verilmiştir:

Bir CSS özelliği ve HTML etiketindeki className = "is-nav-open" gibi bir tetikleyici ile nispeten basittir.

Bu yöntem farklı şekillerde kullanılabilir. Örneğin, gezinmenin üzerinde bir sarmalayıcı oluşturun ve ardından alan değişikliklerine neden olun. Gezinmenin sabit genişliği 250 piksel olduğundan, kenar boşluğu veya TranslateX özelliğine sahip sarmalayıcının genişliği aynı genişliğe sahip olmalıdır. Gezinmeyi göstermeniz gerekiyorsa sarmalayıcıya className = "is-nav-open" eklemeniz ve sarmalayıcıyı marj-left /translateX: 0; konumuna taşımanız gerekir.

Sonuçta animasyon kaynağı şöyle görünecek:

export default class ExampleCss extends Component {
    handleClick() {
        const wrapper = document.getElementById('wrapper');
        wrapper.classList.toggle('is-nav-open')
    }
    render() {
        return (
            <div id="wrapper" className="wrapper">
                <div className="nav">
                    <icon
                        className="nav__icon"
                        type="menu-fold"
                        onClick={() => this.handleClick()}/>
                    <div className="nav__body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Beatae ducimus est laudantium libero nam optio repellat
                        sit unde voluptatum?
                    </div>
                </div>
            </div>
        );
    }
}

Ve işte CSS stilleri:

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: margin .5s;
    margin: 0 0 0 -250px;
}
 
.wrapper.is-nav-open {
    margin-left: 0;
}
 
.nav {
    position: relative;
    width: 250px;
    height: 20px;
    padding: 20px;
    border-right: 1px solid #ccc;
}
.nav__icon {
    position: absolute;
    top: 0;
    right: -60px;
    padding: 20px;
    font-size: 20px;
    cursor: pointer;
    transition: color .3s;
}
 
.nav__icon:hover {
    color: #5eb2ff;
}

Yine, animasyon nispeten basitse, bu yöntem asıl yöntemdir. Kullanıcılar tarayıcının hızından memnun kalacaklardır.

ReactTransitionGroup

ReactTransitionGroup bileşeni, ReactJS topluluk ekibi tarafından geliştirildi. Onun yardımıyla temel CSS animasyonlarını ve geçişlerini kolayca uygulayabilirsiniz.

ReactTransitionGroup, bileşenin yaşam döngüsü değiştiğinde sınıfları değiştirecek şekilde tasarlanmıştır. Boyutu küçüktür ve bir React uygulama paketine kurulması gerekir, bu da genel yapı boyutunu biraz artıracaktır. Ayrıca CDN kullanabilirsiniz.

ReactTransitionGroup'un üç öğesi vardır: Transition, CSSTransition ve TransitionGroup. Animasyonu başlatmak için bileşeni bunlara sarmanız gerekir. Stilin de CSS sınıflarında yazılması gerekiyor.

İşte animasyon ve ardından onu uygulamanın yolu.

İlk adım CSSTransitionGroup'u react-transition-group'tan içe aktarmaktır. Bundan sonra listeyi sarmanız ve geçişAdı özelliğini ayarlamanız gerekir. CSSTransitionGroup'a her alt öğe eklendiğinde veya kaldırıldığında, animasyon stilleri alınır.

<CSSTransitionGroup
    transitionName="example">
    {items}
</CSSTransitionGroup>

TransitName = "example" özelliğinin ayarlanmasıyla, stil sayfalarındaki sınıfların örnek adla başlaması gerekir.

.example-eneter {
    opacity: 0.01;
}
 
.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
}
 
.example-leave {
    opacity: 1;
}
 
.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;

Yukarıda ReactTransitionGroup'un kullanımına bir örnek verilmiştir.

Ayrıca kişi listesi ekleme örneğini uygulamak için mantığa ve iki yönteme ihtiyacımız var.

İlk yöntem,handleAdd'dir; yeni kişiler ekler, rastgele bir ad alır ve bunu daha sonra state.items dizisine yerleştirir.

state.items dizisindeki bir kişiyi dizine göre kaldırmak için,handleRemove kullanılır.

import React, { Component, Fragment } from 'react';
import { CSSTransitionGroup } from 'react-transition-group'
import random from 'random-name'
import Button from './button'
import Item from './item'
import './style.css';
export default class ReactTransitionGroup extends Component {
    
    constructor(props) {
        super(props);
        this.state = { items: ['Natividad Steen']};
        this.handleAdd = this.handleAdd.bind(this);
    }
 
    handleAdd() {
        let newItems = this.state.items;
        newItems.push(random());
        this.setState({ items: newItems });
    }
 
    render () {
        const items = this.state.items.map((item, i) => (
            <Item
            item={item}
            key={i}
            keyDelete={i}
            handleRemove={(i) => this.handleRemove(i)}
            />
        ));
 
    return (
        <Fragment>
            <Button onClick={this.handleAdd}/>
                <div className="project">
                    <CSSTransitionGroup
                    transitionName="example"
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={300}
                    >
                        {items}
                    </CSSTransitionGroup>
                </div>
        </Fragment>
    );
}
};

Tepki animasyonları

Tepki animasyonları animate.css üzerine oluşturulmuş bir kütüphanedir. Onunla çalışmak kolaydır ve birçok farklı animasyon koleksiyonuna sahiptir. Kitaplık, Radium, Afrodit veya stil bileşenleri dahil olmak üzere temel animasyon çerçevelerini tanımlamak için nesnelerin kullanımını destekleyen herhangi bir satır içi stil kitaplığıyla uyumludur.

Ne düşündüğünü biliyorum:

Şimdi zıplayan animasyon örneğini kullanarak bunun nasıl çalıştığını kontrol edelim.

Öncelikle reaksiyon animasyonlarından animasyonu içe aktarıyoruz.

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} sonsuz`;

Daha sonra bileşeni oluşturduktan sonra herhangi bir HTML kodunu veya bileşeni animasyon için sarıyoruz.

<bounce><h1>Hello Animation Bounce</h1></bounce>

Örnek:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';
 
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`;
 
export default class ReactAnimations extends Component {
    render() {
        return (
            <Bounce><h1>Hello Animation Bounce</h1></bounce>
        );
    }
}

Her şey çalışıyor, animasyon çok basit. Ek olarak, kayan zıplayan animasyonu kullanmak için harika bir çözüm var - kaydırma sırasında tepki-canlandırma.

Tepki-açıklama

React Reveal çerçevesinde Solma, çevirme, ölçekleme, döndürme ve daha fazlasını içeren temel animasyonlar vardır. Sahne malzemelerini kullanarak tüm animasyonlarla çalışmanıza olanak tanır. Böylece konum, gecikme, mesafe, basamaklama ve diğerleri dahil olmak üzere ek ayarları yapabilirsiniz. Sunucu tarafı oluşturma ve yüksek dereceli bileşenler de dahil olmak üzere diğer CSS efektleri kullanılabilir. Genel olarak, kayan animasyona ihtiyacınız varsa bu çerçeveyi kullanmaya değer.

import Fade from 'react-reveal/Fade';
 
<Fade top>
    <h1>Title</h1>
</Fade>

Toplamda beş blok var, her birinin tam ekran sayfası ve başlığı var.

import React, { Component, Fragment } from 'react';
import Fade from 'react-reveal/Fade';
 
const animateList = [1, 2, 3, 4, 5];
 
export default class ReactReveal extends Component {
    render() {
        return (
            <Fragment>
                {animateList.map((item, key) => (
                    <div style={styles.block} key={key}>
                        <Fade top>
                            <h1 style={styles.title}>{`block ${item}`}</h1>                       
                        </Fade>
                    </div>
                ))}
            </Fragment>
        );
    }
}
 
const styles = {
    block: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        background: '#000',
        borderBottom: '1px solid rgba(255,255,255,.2)',
    },
    title: {
        textAlign: 'center',
        fontSize: 100,
        color: '#fff',
        fontFamily: 'Lato, sans-serif',
        fontWeight: 100,
    },
};

Şimdi animateList sabitini tanıtıyoruz. Dizi beş öğe içerir. Harita dizisi yöntemini kullandıktan sonra, Fade bileşenlerindeki herhangi bir öğeyi, öğeleri başlığa yerleştirerek oluşturmak mümkündür. Stil sabitinde tanımlanan stiller, hem blok hem de başlık için kısa CSS stilleri alır. Yukarıda Fade animasyonlu beş blok var.

Ant Design'da TweenOne ve animasyon

Karınca Tasarımı — Çok sayıda kullanışlı ve kullanımı kolay bileşen içeren React UI kütüphanesi. Zarif kullanıcı arayüzleri oluşturmanız gerekiyorsa uygundur. Kütüphaneyi birçok projesinde kullanan Alibaba tarafından geliştirildi.

Örnekte oldukça fazla animasyonlu bileşen var. Çoğunun benzer animasyonları vardır, dolayısıyla örnek uygulama yukarıdakinden daha basit olacaktır. Bu yalnızca bir top, bir yeşil top ve örneğin kırmızı bir kare gibi ek bir öğeyi içerecektir.

Animasyon, hareket yolunu doğru şekilde ayarlamak için PathPlugin'e ihtiyaç duyan TweenOne bileşenini kullanır. Bütün bunlar yalnızca
TweenOne.plugins'deki PathPlugin.

TweenOne.plugins.push(PathPlugin);

Ana animasyon parametreleri şunlardır:

• süre — ms cinsinden animasyon süresi;
• kolaylık — animasyon düzgünlüğü;
• yoyo - her tekrarda hareketi ileri ve geri değiştirmek;
• tekrarla - animasyonu tekrarlayın. Sonsuz animasyon için -1 kullanılması gerekir;
• p - animasyon yolunun koordinatları;
• easyPath — animasyonun düzgün yolunun koordinatları.

Son iki parametre çok spesifiktir ancak bunlar için endişelenmenize gerek yoktur, her şey olması gerektiği gibi çalışır.

const duration = 7000;
const ease = 'easeInOutSine';
const p =
  'M123.5,89.5 C148,82.5 239.5,48.5 230,17.5 C220.5,-13.5 127,6 99.5,13.5 C72,21 -9.5,56.5 1.5,84.5 C12.5,112.5 99,96.5 123.5,89.5 Z';
const easePath =
  'M0,100 C7.33333333,89 14.3333333,81.6666667 21,78 C25.3601456,75.6019199 29.8706084,72.9026327 33,70 C37.0478723,66.2454406 39.3980801,62.0758689 42.5,57 C48,46.5 61.5,32.5 70,28 C77.5,23.5 81.5,20 86.5,16 C89.8333333,13.3333333 94.3333333,8 100,0';
const loop = {
  yoyo: true,
  repeat: -1,
  duration,
  ease,
};

Artık animasyon nesnesini oluşturmaya başlayabilirsiniz.

• redSquare döngü parametrelerinin yanı sıra Y koordinatını, süreyi ve gecikmeyi içerir.
• greenBall, x nesne parametrelerine sahip bir yol içerir; y, p'nin değeridir. Ayrıca süre, tekrar ve akıcılık, iki parametreye sahip TweenOne.easing.path'ın bir fonksiyonudur.
• yol - easyPath.
• uzunlukPixel toplam 400 bölüme ayrılmış bir eğridir.
• parça eksenli bir ovaldir, döngü stillerine ve dönüş parametresine sahiptir.

const animate = {
  redSquare: {
    ...loop,
    y: 15,
    duration: 3000,
    delay: 200,
  },
  greenBall: {
    path: { x: p, y: p },
    duration: 5000,
    repeat: -1,
    ease: TweenOne.easing.path(easePath, { lengthPixel: 400 }),
  },
  track: {
    ...loop,
    rotate: 15,
  },
};

Ayrıca TweenOne bileşenine de dikkat etmeniz gerekiyor. Tüm bileşenler rc-tween-one'dan içe aktarılacaktır. TweenOne, animasyonu temsil eden temel donanımları ve animasyon donanımlarını içeren temel bir bileşendir. Her TweenOne'ın redSquare, track, greenBall gibi kendi animasyon parametreleri vardır.

import React from 'react';
import TweenOne from 'rc-tween-one';
 
export default function BannerImage() {
    return (
      <div className="wrapper-ant-design">
        <svg width="482px" height="500px" viewBox="0 0 482 500">
          <defs>
            <path
              d="M151,55 C129.666667,62.6666667 116,74.3333333 110,90 C104,105.666667 103,118.5 107,128.5 L225.5,96 C219.833333,79 209.666667,67 195,60 C180.333333,53 165.666667,51.3333333 151,55 L137,0 L306.5,6.5 L306.5,156 L227,187.5 L61.5,191 C4.5,175 -12.6666667,147.833333 10,109.5 C32.6666667,71.1666667 75,34.6666667 137,0 L151,55 Z"
              id="mask"
            />
          </defs>
          <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(0, 30)">
            <g id="Group-13" transform="translate(0.000000, 41.000000)">
              <TweenOne component="g" animation={animate.redSquare}>
                <rect
                  stroke="#F5222D"
                  strokeWidth="1.6"
                  transform="translate(184.000000, 18.000000) rotate(8.000000) translate(-184.000000, -18.000000) "
                  x="176.8"
                  y="150.8"
                  width="14.4"
                  height="14.4"
                  rx="3.6"
                />
              </TweenOne>
            </g>
            <g id="Group-14" transform="translate(150.000000, 230.000000)">
              <g id="Group-22" transform="translate(62.000000, 7.000000)">
                <image
                  id="cc4"
                  alt="globe"
                  xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/FpKOqFadwoFFIZFExjaf.png"
                  width="151px"
                  height="234px"
                />
              </g>
              <mask id="mask-2">
                <use xlinkHref="#mask" fill="white" transform="translate(-42, -33)" />
              </mask>
              <g mask="url(#mask-2)">
                <TweenOne component="g" animation={animate.track} style={{ transformOrigin: '122.7px 58px' }}>
                  <g transform="translate(-16, -52)">
                    <g transform="translate(16, 52)">
                      <path
                        d="M83.1700911,35.9320015 C63.5256194,37.9279025 44.419492,43.1766434 25.8517088,51.6782243 C14.3939956,57.7126276 7.77167019,64.8449292 7.77167019,72.4866248 C7.77167019,94.1920145 61.1993389,111.787709 127.105708,111.787709 C193.012078,111.787709 246.439746,94.1920145 246.439746,72.4866248 C246.439746,55.2822262 212.872939,40.6598106 166.13127,35.3351955"
                        id="line-s"
                        stroke="#0D1A26"
                        strokeWidth="1.35"
                        strokeLinecap="round"
                        transform="translate(127.105708, 73.561453) rotate(-16.000000) translate(-127.105708, -73.561453) "
                      />
                    </g>
                    <TweenOne component="g" animation={animate.greenBall}>
                      <image
                        alt="globe"
                        id="id2"
                        xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/IauKICnGjGnotJBEyCRK.png"
                        x="16"
                        y="62"
                        width="26px"
                        height="26px"
                      />
                    </TweenOne>
                  </g>
                </TweenOne>
              </g>
            </g>
          </g>
        </svg>
      </div>
    );
  }

Evet, korkutucu görünüyor ancak bu yöntemi kullanan animasyon basittir.

 <TweenOne component="g" animation={animate.redSquare} />
  <TweenOne component="g" animation={animate.track} />
  <TweenOne component="g" animation={animate.greenBall} />

Tek yapmanız gereken animasyon kurallarını tanımlayıp bunları TweenOne bileşenine aktarmak.

Farklı hedeflere ulaşmak farklı yaklaşımlar gerektirir. Bu makalede çok sayıda projede kullanılabilecek çeşitli çözümler tartışılmıştır. Doğru olanı seçmek size kalmış.

Skillbox şunları önerir:

• İki yıllık uygulamalı kurs "Ben bir PRO web geliştiricisiyim".
• çevrimiçi kurs "Sıfırdan C# geliştiricisi".
• Uygulamalı yıl kursu "0'dan PRO'ya PHP geliştiricisi".

Kaynak: habr.com