首页 > 其他分享 >【动画进阶】有意思的 Emoji 3D 表情切换效果

【动画进阶】有意思的 Emoji 3D 表情切换效果

时间：2023-08-01 10:22:27浏览次数：54  
标签：动画 进阶 Emoji 50% rgba 3D transparent 255

最近，群里面的同学发了这么一个非常有意思是动画效果：

bg1.gif

原效果地址 -- CodePen Demo -- Letter Hop

当然，原效果，主要使用了 GSAP 动画库以及一个 3D 文字 JavaScript 库：

import { Those3DTexts } from "https://cdn.skypack.dev/that-3d-text-library";
import { gsap } from "https://cdn.skypack.dev/gsap";
import { MotionPathPlugin } from "https://cdn.skypack.dev/gsap/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

// ....
// 剩余代码

但是，这个效果，其实本身并不复杂。

本文，我们将不借助任何动画库，尝试用最简单的 CSS 和 JavaScript 代码还原一个类似的 Emoji 3D 表情动画。

我们的目标是实现这么一个效果：

实现 3D Emoji 表情

首先，一个比较大的难点就是，我们如何使用 CSS 实现一个 3D 的 Emoji 表情？像是这样：

这里，其实使用的是个障眼法。核心就在于，使用多层 Emoji 表情的叠加，当叠加的间距合适的情况下，当观看角度处于一定的合理范围内时，视觉上就能得到一种 3D 的效果。

什么意思呢？之前在这篇文章中 -- 哇哦，巧用视觉障眼法，还原 3D 文字特效，有介绍过这个技巧。我们快速回顾一下：

合理的利用距离、角度及光影构建出不一样的 3D 效果。看看下面这个例子，只是简单是设置了三层字符，让它们在 Z 轴上相距一定的距离。

简单的伪代码如下：

<div>
  <span class='C'>C</span>
  <span class='S'>S</span>
  <span class='S'>S</span>
  <span></span>
  <span class='3'>3</span>
  <span class='D'>D</span>
</div>

$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
	perspective: 2000px;
	transform-style: preserve-3d;
	animation: fade $duration infinite;
}
span {
	transform-style: preserve-3d;
	transform: rotateY(25deg);
	animation: rotate $duration infinite ease-in;
	
	&:after, &:before {
		content: attr(class);
		color: $gold;
		z-index: -1;
		animation: shadow $duration infinite;
	}
	&:after{
		transform: translateZ(-16px);
	}
	&:before {
		transform: translateZ(-8px);
	}
}
@keyframes fade {
	// 透明度变化
}
@keyframes rotate {
	// 字体旋转
}
@keyframes shadow {
       // 字体颜色变化
}

简单捋一下，上述代码的核心就是：

  1. 父元素、子元素设置 transform-style: preserve-3d
  2. 用 span 元素的两个伪元素复制两个相同的字，利用 translateZ() 让它们在 Z 轴间隔一定距离
  3. 添加简单的旋转、透明度、字体颜色变化

可以得到这样一种类似电影开片的标题 3D 动画，其实只有 3 层元素，但是由于角度恰当，视觉上的衔接比较完美，看上去就非常的 3D。

为什么上面说需要合理的利用距离、角度及光影呢？

还是同一个动画效果，如果动画的初始旋转角度设置的稍微大一点，整个效果就会穿帮：

可以看到，在前几帧，能看出来简单的分层结构。又或者，简单调整一下 perspective，设置父容器的 perspective 由 2000px 改为 500px，穿帮效果更为明显：

也就是说，在恰当的距离，合适的角度，我们仅仅通过很少的元素，就能在视觉上形成比较不错的 3D 效果。

上述的完整代码，你可以猛击这里：CSS 灵感 -- 3D 文字出场动画

我们把上述的效果，套用到一个 Emoji 表情上：

<div class="g-emoji">
    <div class="g-foo"></div>
    <div class="g-bar"></div>
    <div class="g-baz"></div>
</div>

.g-emoji {
    position: relative;
    width: 200px;
    height: 200px;
    perspective: 2000px;
    transform-style: preserve-3d;
    font-size: 200px;
    animation: rotate 2s alternate infinite ease-in-out;

    &::before,
    &::after {
        content: "\1F600"
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
    }
    &::after {
        transform: translate(-50%, -50%) translateZ(-4px);
    }

    .g-foo,
    .g-bar,
    .g-baz{
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
    }

    .g-foo::before,
    .g-foo::after,
    .g-bar::before,
    .g-bar::after,
    .g-baz::before,
    .g-baz::after{
        content: "\1F600";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
    }
    .g-foo::before {
        transform: translate(-50%, -50%) translateZ(-8px);
        opacity: .95;
    }
    .g-foo::after {
        transform: translate(-50%, -50%) translateZ(-12px);
        opacity: .9;
    }
    .g-bar::before {
        transform: translate(-50%, -50%) translateZ(-16px);
        opacity: .85;
    }
    .g-bar::after {
        transform: translate(-50%, -50%) translateZ(-20px);
        opacity: .8;
    }
    .g-baz::before {
        transform: translate(-50%, -50%) translateZ(-24px);
        opacity: .75;
    }
    .g-baz::after {
        transform: translate(-50%, -50%) translateZ(-28px);
        opacity: .7;
    }
}

@keyframes rotate {
    0% {
        transform: rotateY(-45deg);
    }
    100% {
        transform: rotateY(45deg);
    }
}

这里做了什么事情呢：

  1. 利用元素的伪元素，生成了多个同样的 Emoji 表情，也就是这一句 content: "\1F600"，其中 \1f600 表示是的笑脸的 Emoji 表情
  2. 多个相同的 Emoji 表情，叠加在一起，但是设置了不同的 translateZ以及不同的透明度

这里需要提一句，Emoji 表情是有特定的编码范围的，Emoji 表情的编码范围通常是指 Unicode 字符集中专门用于表示 Emoji 图形的范围，一个常见的范围是从 U+1F600 到 U+1F64F。

这样，我们让整个容器在一定角度下绕 Y 轴旋转起来，就可以得到 3D 效果：

bg3.gif

这里设定了旋转角度为 -45deg ~ 45deg。

如果我们把角度调大，就能清晰的看到效果效果穿帮（下面效果的旋转角度为 -85deg ~ 85deg）：

完整的代码，你可以戳这里了：CodePen Demo - 3D Emoji Demo

弹跳动画

好，有了 3D Emoji，接下来，就是实现一个自由落体的弹跳动画。

这个相对而言比较简单，当然，为了效果逼着，在下落的过程中需要让元素受到挤压变形。

关于一个动画原则及技巧，建议同学们可以看看我的这篇文章 -- Web 动画原则及技巧浅析

核心借助缓动函数，以及 transform，我们在上述 DEMO 的基础上，实现弹跳动画效果：

<div class="g-emoji">
    <div class="g-foo"></div>
    <div class="g-bar"></div>
    <div class="g-baz"></div>
</div>

body, html {
    width: 100%;
    height: 100%;
    display: flex;
    background: conic-gradient(#fff, #fff 90deg, #ddd 90deg, #ddd 180deg, #fff 180deg, #fff 270deg, #ddd 270deg);
    background-size: 50px 50px;
}


.g-emoji {
    position: relative;
    width: 200px;
    height: 200px;
    margin: auto;
    perspective: 2000px;
    transform-style: preserve-3d;
    font-size: 200px;
    animation: 
        rotate 2s alternate infinite ease-in-out,
        fall .6s alternate infinite cubic-bezier(.22,.16,.04,.99) forwards;

    //...
}
@keyframes fall {
    0% {
        scale: 1.25 0.75;
        translate: 0 150px;
    }
    25% {
        scale: 1 1;
    }
    100% {
        scale: 1 1;
        translate: 0 0;
    }
}

与上面代码不一样的是，这里新增了 fall 动画效果，此效果完成了两件事：

  1. 利用 translate 实现了下落动画
  2. 利用 scale 实现了形变变化

当然，由于是自由落地，选取了一个与自由落体速率相近的 cubic-bezier(.22,.16,.04,.99) 缓动函数，并且，利用了 alternate infinite 让整个动画效果，反向无限运行。

这样，我们就能得到这么一个效果：

嘿，是不是有那么点效果了。

解决弹起瞬间切换 Emoji 表情

OK，接下来，我们要解决另外一个难点。

如何在 Emoji 表情弹起的瞬间，替换一个新的 Emoji 表情呢？

此处的麻烦之处在于，上面列出的两个动画效果，都是 infinite 无限动画。熟悉 CSS 动画的同学应该都知道，在 JavaScript 中，我们可以利用 animationstart 和 animationend 两个事件，监听 CSS 动画的开始与结束。

然而，上面也说了，由于本例中的 CSS 动画都是无限动画，我们无法通过这两个事件去获取譬如动画弹起和下落的一些关键事件节点。

因此，这里我使用了 requestAnimationFrame 去完成这个事情。步骤大致如下：

  1. 改造一下代码，DEMO 中 CSS 代码中使用的 Emoji 表情，通过 JavaScript 写入元素的 style 标签内，通过 CSS 变量获取
  2. 通过 requestAnimationFrame 监听页面渲染的每一帧，计算每一帧元素当前的位置与上一帧的位置的一些关系
  3. 如果发现上一帧中，元素在下降（计算相对位置变化得到），而最新的一帧中，元素开始上升，则找到了元素从下落到上升转换的这一帧
  4. 而（3）这一帧的 requestAnimationFrame()，可以理解为是一个 HOOK，我们在这一帧中，实现 Emoji 表情的随机生成与写入元素的 Style 属性中

上面一段步骤代码，需要好好理解，代码大致如下：

<div class="g-emoji">
    <div class="g-foo"></div>
    <div class="g-bar"></div>
    <div class="g-baz"></div>
</div>


.g-emoji {
    position: relative;
    animation: rotate 2.3s alternate infinite ease-in-out,
        fall .6s alternate infinite cubic-bezier(.22,.16,.04,.99) forwards;

    &::before,
    &::after {
        content: var(--emoji, "\1F600");
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
    }

    .g-foo::before,
    .g-foo::after,
    .g-bar::before,
    .g-bar::after,
    .g-baz::before,
    .g-baz::after{
        content: var(--emoji, "\1F600");
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
    }
    // ...
}

最为核心的 JavaScript 代码：

const emoji = document.querySelectorAll('.g-emoji')[0];

let curTranslate = 0;
let lastTranslate = 0;
let diff = 0;

function aniFun() {
    curTranslate = window.getComputedStyle(emoji, null).getPropertyValue("translate").split(' ')[1].slice(0, -2) - 0;
    
    // 翻转
    if (diff > 0 && (curTranslate - lastTranslate < 0)) {
        emoji.style = `--emoji: "${generateRandomEmoji()}"`;
    }
    
    window.requestAnimationFrame(aniFun);
    diff = curTranslate - lastTranslate;
    lastTranslate = curTranslate;
}

function generateRandomEmoji() {
  // 开始的 Emoji 编码
  var emojiStart = 0x1F600; 
  var emojiStart2 = 0x1F900; 
  // 结束的 Emoji 编码
  var emojiEnd = 0x1F64F;
  var emojiEnd2 = 0x1F9FF;

  var randomCode = Math.random() > 0.5 
    ? Math.floor(Math.random() * (emojiEnd - emojiStart + 1)) + emojiStart
    : Math.floor(Math.random() * (emojiEnd2 - emojiStart2 + 1)) + emojiStart2;
  var emoji = String.fromCodePoint(randomCode);

  return emoji;
}

window.requestAnimationFrame(aniFun);

这样，我们就成功的拿到了动画从下落转向上升的那一帧。

经读者提醒，这里还可以使用 animationiteration 去监听无限动画的每一次轮回，当然，使用 animationiteration 会有两个节点，需要判断是从下落转向上升的那一个节点，其余代码和上述的代码类似。

并且，在这一帧中，利用 generateRandomEmoji()，随机生成了一个 Emoji 表情的 Unicode 编码，插入元素中。这样，我们能得到这样一个效果：

bg6.gif

效果还是很不错的。主体动画已经实现了，接下来，我们进行下一个环节。

增加随机背景

好，到这里，基本上最为核心的部分我们已经实现了。

接下来，就是让整个动画更加的丰满有特色的一些辅助工作。

下一个非常有意思点，如何添加随机背景动画？可以看到最上面的 DEMO 图，在 Emoji 表情变化的瞬间，背景图也在变化。

这个也好做，上面我们既然已经拿到了从下落转向上升的那一帧。那么我们就可以在这一帧中，做更多事情。

随机背景的做法就是：

  1. 事先基于 <body>，使用 CSS 实现多个不同的背景效果，每个效果，都赋予一个单独的 className
  2. 在表情切换的瞬间，也随机切换一个背景效果，其本质就是给 body 再添加一个事先定义好的范围内的随机的 className，表现为不同的背景效果

body.a {
    background-image: conic-gradient(#fff, #fff 90deg, #ddd 90deg, #ddd 180deg, #fff 180deg, #fff 270deg, #ddd 270deg);
    background-size: 50px 50px;
}
body.b {
    background-image: 
    linear-gradient(0deg, transparent 9%, 
            rgba(255, 255, 255, .2) 10%, rgba(255, 255, 255, .2) 12%, transparent 13%, transparent 29%, 
            rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .1) 31%, transparent 32%, transparent 49%, 
            rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 51%, transparent 52%, transparent 69%, 
            rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, .1) 71%, transparent 72%, transparent 89%,
            rgba(255, 255, 255, .1) 90%, rgba(255, 255, 255, .1) 91%, transparent 92%, transparent),
    linear-gradient(90deg, transparent 9%, 
            rgba(255, 255, 255, .2) 10%, rgba(255, 255, 255, .2) 12%, transparent 13%, transparent 29%, 
            rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .1) 31%, transparent 32%, transparent 49%, 
            rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 51%, transparent 52%, transparent 69%, 
            rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, .1) 71%, transparent 72%, transparent 89%,
            rgba(255, 255, 255, .1) 90%, rgba(255, 255, 255, .1) 91%, transparent 92%, transparent);
    background-size:50px 50px;
}
body.c {
    background-image: linear-gradient(rgba(0, 255, 0, .7) .1em, transparent .1em), linear-gradient(90deg, rgba(0, 255, 0, .7) .1em, transparent .1em);
    background-size: 3em 3em;
}
body.d {
    background: repeating-linear-gradient(45deg, #444 0 20px, #c0466f 0 40px);
}
body.e {
    background: repeating-radial-gradient(circle at 50% 50%, #fff, #9C27B0 20px, #FF5722 21px, #9C27B0 40px, #000000 41px, #256b8f 60px, #fff 61px);
}
body.f {
    background: conic-gradient(#333 0 45deg, #fff 0 360deg);
    background-position: -50% -50%;
    background-size: 30px 30px;
}
body.g {
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 3s ease infinite;
    }
}
body.h {
    background: linear-gradient(30deg, #000 0, #000 49.9%, #fff 50%);
}
body.i {
    background: #000;
    &::before,
    &::after {
        content: '';
        position: absolute;
        inset: 0 50% 0 0;
        background: linear-gradient(
            45deg,
            #00f376 10%,
            transparent 10%,
            transparent 50%,
            #00f376 50%,
            #00f376 60%,
            transparent 60%,
            transparent 100%
      );
      background-size: 40px 40px;
      animation: move 0.3s linear infinite;
    }
    &::after {
        inset: 0 0 0 50%;
        transform: rotateY(180deg);
    }
}
body.j {
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: conic-gradient(#fff 0, transparent 30%, #fff);
        
    }
}
body.k {
    &::before {
        content: "";
        position: absolute;
        inset: -100vmax;
        background: conic-gradient(#fff 0, transparent 45%, #fff);
        animation: bgrotate 2s infinite linear;
    }
}

const body = document.querySelectorAll('body')[0];
const container = document.querySelectorAll('.g-container')[0];
const emoji = document.querySelectorAll('.g-emoji')[0];
const bgArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'];

let curTranslate = 0;
let lastTranslate = 0;
let diff = 0;

function aniFun() {
    curTranslate = window.getComputedStyle(emoji, null).getPropertyValue("translate").split(' ')[1].slice(0, -2) - 0;
    
    // 翻转
    if (diff > 0 && (curTranslate - lastTranslate < 0)) {
        emoji.style = `--emoji: "${generateRandomEmoji()}"`;
        body.style = `--bg: ${generateRandomColor()}`;
        body.setAttribute('class', bgArr[Math.floor(Math.random() * bgArr.length)]);
    }
    
    window.requestAnimationFrame(aniFun);
    diff = curTranslate - lastTranslate;
    lastTranslate = curTranslate;
}

function generateRandomColor() {
  var red = Math.floor(Math.random() * 256);
  var green = Math.floor(Math.random() * 256);
  var blue = Math.floor(Math.random() * 256);

  var color = "rgb(" + red + ", " + green + ", " + blue + ")";

  return color;
}

function generateRandomEmoji() {
  // 开始的 Emoji 编码
  var emojiStart = 0x1F600; 
  var emojiStart2 = 0x1F900; 
  // 结束的 Emoji 编码
  var emojiEnd = 0x1F64F;
  var emojiEnd2 = 0x1F9FF;

  var randomCode = Math.random() > 0.5 
    ? Math.floor(Math.random() * (emojiEnd - emojiStart + 1)) + emojiStart
    : Math.floor(Math.random() * (emojiEnd2 - emojiStart2 + 1)) + emojiStart2;
  var emoji = String.fromCodePoint(randomCode);

  return emoji;
}

window.requestAnimationFrame(aniFun);

上面，我们定义了 body.a ~body.k 的多个随机背景效果。

在表情切换的瞬间，也随机切换一个背景效果，其本质就是给 body 再添加一个事先定义好的范围内的随机的 className。

效果如下：

这样，整个动画就基本完成了。基于上述的核心步骤，可以再做一些细节的增强：

  1. 伴随 Emoji 表情落体运动，下方可以增添阴影的变化
  2. Emoji 表情旋转方向的变化优化
  3. 丰富不同的背景效果
  4. 等等等等

这样，最终整个效果就完成啦，效果如下：

看似很复杂的一个动画效果，经过拆解后，一步一步实现，其实也不难。

完整的动画效果，你可以戳这里：CodePen Demo -- Random 3D Emoji

总结一下

好了，本文到此结束，希望对你有帮助

标签：动画,进阶,Emoji,50%,rgba,3D,transparent,255
From： https://www.cnblogs.com/coco1s/p/17595727.html

相关文章

  • 建模教程：如何利用3ds Max 和 After Effects 实现多通道渲染和后期合成 - 第 1 部分
     推荐：NSDT场景编辑器助你快速搭建可二次开发的3D应用场景1.创建基本场景步骤1打开 3dsMax。在透视视口。打开3dsMax步骤2做一个茶壶，放在飞机上。制作茶壶步骤3我在场景中应用了几个灯光。我选择了光线追踪阴影作为阴影。光线追踪阴影步骤4按 M 打开材质......
  • 建模教程：如何利用3ds Max 和 After Effects 实现多通道渲染和后期合成 - 第 2 部分
     推荐：NSDT场景编辑器助你快速搭建可二次开发的3D应用场景1.创建基本场景步骤1打开 3dsMax。打开3dsMax。步骤2我做了一个简单的场景。我放了三个彼此之间有一定距离的物体。制作对象步骤3按 Ctrl-C 键在透视视图中创建摄影机。创建相机2.设置对象ID步......
  • 你确定不来看看？谷歌技术团队打造的Kotlin协程入门+进阶实战
    前言尽管协程并不是一个新的话题，但他是一个很吸引人的话题，协程在这些年里被重新发现了很多次，特别是当需要某种形式的轻量级线程和/或寻找“回调地狱”的解决方案时。Kotlin协程的概念协程是Coroutine的中文简称，co表示协同、协作，routine表示程序。协程可以理解为多个互相协作的程序......
  • 第十四章 磁盘配额(Quota)与进阶文件系统管理
    第十四章磁盘配额(Quota)与进阶文件系统管理14.1磁盘配额(Quota)的应用与实作Quota的一般用途Quota比较常使用的几个情况是：针对WWWserver，例如：每个人的网页空间的容量限制针对mailserver，例如：每个人的邮件空间限制针对fileserver，例如，每个人最大的可用网络硬盘空间（教学......
  • mysql 简单进阶 ———— 重构查询[二]
    前言简单整理一下重构查询。正文为什么我们需要重构查询，原因也很简单，那就是查询慢。为什么会查询慢？查询性能慢底下的最基本的原因是访问的数据太多。某些查询不可避免地需要筛选大量的数据，但这并不常见。大部分性能低下的查询都可以通过减少访问的数据流的方式进行优化。......
  • Flutter系列文章-Flutter进阶2
    这一节我将再详细地为您介绍Flutter进阶主题，包括导航和路由、状态管理、异步处理、HTTP请求和RestAPI，以及数据持久化。让我们逐个介绍这些主题。1.导航和路由在Flutter中，导航和路由是构建多页面应用的关键概念。导航是指从一个页面（或称为路由）切换到另一个页面的过程。每个......
  • 十三、ElasticSearch和Kibana进阶--谷粒商城
    导入样本测试数据准备一份顾客银行账户信息的虚构的JSON文档样本。每个文档都有下列的schema（模式）。{"account_number":1,"balance":39225,"firstname":"Amber","lastname":"Duke","age":32,"gen......
  • mysql 简单进阶 ———— 多列索引[一]
    前文整理一下mysql的一些简单进阶技巧，来源于高性能mysql，但不是根据书的序列来的。正文有一个问题，那就是我们为什么要创建多列索引呢？这是要思考的一个问题。为什么创建多列索引，而不是创建多个单列索引。需要弄明白这个问题，那么就需要知道索引是如何工作的。为什么有索引这个......
  • C++ 算法进阶系列之再聊聊动态规划的两把刷子
    1.前言递归和动态规划是算法界的两个扛把子，想进入算法之门，则必须理解、掌握这两种算法的本质。一旦参悟透这2种算法的精髓，再加上对树、图等复杂数据结构的深入理解，可以解决大部分的算法问题。本文通过几个典型案例，再次聊聊动态规划算法。其实动态规划算法也就2把刷子。找到......
  • 雀魂07 进阶技巧
    在无人被飞的情况下，东场每个人一个庄位，而南场每个人是两个庄。东场运气＞技术，南场正好相反 制定振听规则的意义在于防守判断与减少见逃行为的发生。所以，在出牌的后期，要如果自己的牌处于听的状态，但是为了防止其他人优势和。可以放弃和牌，进行防守。出牌的时候，参考别人打出过的牌，......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99