Помните анимационный тур h5

CSS

Резюме анимации деятельности на конец года h5

кликните сюда----♂--гитхаб--

css3 + react-id-swiper + react + redux + saga
Использование плагина Autoprefixer postcss может решить проблемы совместимости большинства мобильных телефонов oppo и vivo.

1. Основное содержание, связанное с анимацией:

  1. метеор
  2. Мигающие звезды
  3. Слово рок
  4. Движение человека (анимация + отслеживание времени окончания анимации)
  5. мощение моста
  6. Включите масштабирование кнопки путешествия
  7. Вращение (+ Совместимость)
  8. react-id-swiper
  9. Swiper взаимодействует с css3 для реализации переключения

2. Синтаксис анимации CSS3

  • animation
animation-name
animation-duration
animation-timing-function  速度曲线
animation-delay
animation-iteration-count
animation-direction
play-state	
fill-mode
  • transform

Свойство преобразования применяет к элементу 2D- или 3D-преобразование. Это свойство позволяет нам вращать, масштабировать, перемещать или наклонять элемент. где transform-origin (свойство изменяет центр трансформируемого элемента).

  • transition

Разница между тремя: анимация, анимация, ключевой кадр, взаимность. переход переход, свойство, триггерное действие, переходный процесс. преобразование преобразования, параметры комплексного преобразования.

3. ПримерGitHub.com/Court Start/Re…

  • метеор

изменить местоположениеtranslate3d,прозрачностьopacityи размерscale.
Хвост метеора использует псевдоэлементарные элементы:afterвращать-45deg(базовая точка вращения слеваtransform-origin: left;);использоватьborderМожно добиться того, что ярче возле головы и темнее возле хвоста.

图一 流星

.star {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 10px;
    left: 200px;
    position: relative;
    animation: star-ani 6s infinite ease-out;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 1;
}
.star:after {
    content: '';
    display: block;
    top: 0px;
    left: 40%;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: left;
}

@keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
    }
}
  • мерцающие звезды

изменить прозрачность

.shine {
    background: url('../../../../images/action/icon-star1.png') no-repeat center;
    background-size: 100%;
    width: 30px;
    height: 40px;
    position: absolute;
    top: 90px;
    left: 100px;
    opacity: 0;
    animation: opacity-change 0.5s ease-in-out infinite;
}

@keyframes opacity-change {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
  • Персонаж

Разделено на две анимации, падение и подъем.translateYПросто измените его.

.text-item-0 {
    position: absolute;
    width: 25px;
    height: 75px;
    top: 60px;
    left: 100px;
    background: url('../../../../images/action/S-start.png') no-repeat center;
    background-size: 100%;
    animation: letter-0 1.5s ease-in-out both, letter-0-1 2.0s ease-in-out 1.5s both;
}

@keyframes letter-0 {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(80px)
    }
    100% {
        transform: translateY(0px)
    }
}
@keyframes letter-0-1 {
    0% {
        opacity: 1;
    }
    100% {
        top: -80px;
        opacity: 0;
    }
}
  • люди двигаются

Переключите дом, добавьте классы для управления движением и паузой и переключите фоновых персонажей. мониторanimationendмероприятие.

jsx
{
    peopleMove ?
        <div
            className={`${style.people_move} ${!pausedState && style.people_paused}`}
            ref={start2 => { this.start2 = start2 }}
        />
        :
        <div className={style.people} />
}
css
.people {
    width: 20px;
    height: 64px;
    position: absolute;
    left: 10px;
    top: 130px;
    background: url('../../../../images/action/people.png') no-repeat center;
    background-size: 100%; 
    opacity: 0;
    animation: peopleUp 1s ease-in-out 0.5s both;
}
.people_move {
    background: url('../../../../images/action/people_moveleft.gif');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 64px;
    position: absolute;
    left: 10px;
    top: 130px;
    opacity: 1;
    animation: PeopleMove 1.5s linear 0s both;
}
.people_paused {
    width: 20px;
    height: 64px;
    background: url('../../../../images/action/people.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    animation-play-state: paused;
}

@keyframes peopleUp {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes PeopleMove {
    0% {
        left: 10px;
        top: 130px;
    }
    100% {
        top: 20px;
        left: 180px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
}

// 监听动画结束时机
componentDidUpdate() {
    const { peopleMove } = this.state
    if (peopleMove) {
        this.start2.addEventListener('animationend', this.end)
        this.start2.addEventListener('webkitAnimationEnd', this.end)
        this.start2.addEventListener('mozAnimationEnd', this.end)
        this.start2.addEventListener('oAnimationEnd', this.end)
    }
}
  • Появление моста

Сотрудничатьbackground-size: cover;реализация имущества.

.brige {
    width: 0px;
    background: url('../../../../images/action/bridge.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100px;
    position: absolute;
    top: 40px;
    left: 30px;
    animation: BridgeFadeIn 3s linear both;
    opacity: 0;
}

@keyframes BridgeFadeIn {
    0% {
        width: 0px;
        opacity: 0;
    }
    100% {
        width: 200px;
        opacity: 1;
    }
}
  • Градиент большой (начало пути)

использоватьtransform scaleПреобразование 2D-масштабирования.

.icon-ciecle {
    display: block;
    position: absolute;
    left: 100px;
    top: 80px;
    width: 30px;
    height: 30px;
    background: url('../../../../images/action/icon-light.png') no-repeat center;
    background-size: 100%; 
    animation: warn 1.2s ease-in-out 0s infinite both;
}

@keyframes warn {
    0% {
        transform: scale(0.1);
        opacity: 0.0;
    }
    25% {
        transform: scale(0.2);
        opacity: 0.3;
    }
    50% {
        transform: scale(0.4);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.6);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.0;
    }
}
  • вращать

iOSanimation-play-state: paused;не работает, иanimationАнимация не может быть написана в новом классе, она должна быть написана в классе. (Нашел в тесте, тут есть сомнения.)

.music_img {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    left: 100px;
    top: 80px;
    animation: rotating 3s linear infinite;
    animation-play-state: running;
}
.rotate-pause {
    animation-play-state: paused;
}

@keyframes rotating {
    0% {
    	transform: rotate(0deg);
     }
    100% { 
	transform: rotate(360deg);
     }
}
  • react-id-swiper

Реактивная версия Swiper поддерживает базовые API и эквивалентна Swiper v4 с экспериментальной визуальной проверкой.

  1. Не обязательно через апи. Это также может быть достигнуто путем перезаписи css.
  2. Если вы перепишете эффект перехода css, он повлияет на собственный эффект анимации, поэтому его можно будет контролировать, добавив нескользящее.
1. 
.swiper-wrapper {
    transition-delay: 1.6s;
}
2. 
noSwiping: true,
noSwipingClass: 'stop-swiping',
  • Переключение лабиринта реализовано Swiper

1.свайперeffectАтрибут и управление фоновым изображениемopacity, используя разницу во времени для достижения конечного эффекта. В том числе переключение лабиринта, появление и исчезновение человека с рюкзаком, появление и исчезновение всплывающего окна.
2. атрибут swiperactiveIndex, вы можете получить страницу для перехода, изменивdomИли измените класс, чтобы управлять анимацией страницы.

// 根据activeIndex拿到的页数，控制该页数state的改变，通过切换dom和添加类的方式，达到进场与退场的动画效果。
// 添加类stop-swiping控制不可滑动，动画完成后，才可继续滑动下一页。
const mazeStyle = classNames({
    [styles['maze-1']]: true,
    [styles['maze-out']]: firstMazeOut,
})
const peopleStyle = classNames({
    [styles['people-1']]: true,
    [styles['people-out']]: firstMazeOut,
})
const popCardStyle = classNames({
    [styles['pop-card-container']]: true,
    [styles['pop-card-out']]: firstMazeOut,
})
{
    firstMazeIn ?
        <div className={!isSlideFirst && "stop-swiping"}>
            <div className={styles['maze-container']}>
                <div className={mazeStyle} />
                <div className={peopleStyle} />
            </div>
            <div className={popCardStyle}>
                <ModalScene {...this.props} />
            </div>
        </div>
        :
        <div />    // 不添加会影响swiper自身页数的判断
}

4. Резюме анимации

То, что пишут другие, действительно потрясающе, но я могу толькоopacity,translate.

5. Доработать

  • html2canvas
  • загрузка ресурсов
  • Использование jsbridge и меры предосторожности
Категории