uniapp image图片切换动效_Web动效实现手段

作者 | 大漠来源 |https://www.w3cplus.com/web/web-tips-14.html©w3cplus.com前段时间在微信群聊了一个动效的话题：鼠标悬浮的时候，三个区块依次显示；鼠标移开时，三个区块反向依次消失。如果使用CSS的triansition是否可以实现？借此话题，在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可...

weixin_39831170

1692人浏览 · 2020-12-01 14:26:02

weixin_39831170 · 2020-12-01 14:26:02 发布

作者 | 大漠

来源 | https://www.w3cplus.com/web/web-tips-14.html © w3cplus.com

前段时间在微信群聊了一个动效的话题：

鼠标悬浮的时候，三个区块依次显示；鼠标移开时，三个区块反向依次消失。如果使用CSS的triansition是否可以实现？

借此话题，在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊，比如，动画的设计、交互、实现等等。甚至是实现的技术方案或工具。

Web动效实现手段

说到动效，可能大家都会觉得Web动效是现代Web才具有的特性，事实上并非如此，Web出现不久，甚至CSS还未来的时候，在Web上有动效的身影。

时至今日，有关于Web动效的实现手段常见的主要有：

最为古老的HTML标签和，前者可以实现闪烁的动效，后者可以实现跑马灯的动效
在Web中引用.gif文件格式，让元素有动效
在Web中引用视频
CSS的transition和animation实现动效
Web Animations API
Canvas和SVG相关的动效
WebGL动效(3D动效)

对于开发人员可能会更为关注怎么在Web中开发动效。事实上，要在Web上添加动效，除了技术实现之外，还有很多知识点可以讨论，比如。

如何设计出色的动效

有关于如何设计出色的动效，在互联网上有关于这方面的讨论非常的多，也有一些设计规范，比如：

Material Motion
IBM's Animation Principles
The UX in Motion Manifesto

这些规范可以让我们从设计的角度来理解Web的动效：

事实上要设计好出一个较为盒理的动效，在设计的阶段就需要对这方面有考虑。迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。

挤压和拉伸 (Squash and stretch)

预备动作 (Anticipation)

演出布局 (Staging)

连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose)

跟随和重叠动作 (Follow Through and Overlapping Action)

缓入缓出 (Slow In and Slow Out)

弧线运动 (Arc)

次要动作 (Secondary Action)

时间节奏 (Timing)

夸张手法 (Exaggeration)

扎实的描绘 (Solid drawing)

吸引力 (Appeal)

如果你对Web动效设计和体验相关的话题感兴趣的话，可以花点时间阅读下面相关的文章：

Animation & UX Resources
The ultimate guide to proper use of animation in UX
6 Animation Guidelines for UX Design
The Designer’s Guide to Adding Animation in UX Design
How to fix dragging animation in UI with simple math

Web动效实现技术方案

前面提到过，实现Web动效的技术手段有很多种，在现代Web中，常见的Web动效实现方案主要有CSS动效，JavaScript动效，SVG动效，WebGL动效等。

CSS动效

在CSS中实现动效，除了我们熟悉的transition和animation之外还有motion-path等。

CSS transition

CSS的transition实现的动效相对而言是较为简单的。就是实现从一个状态到另一个状态过渡效果。简单地说，就是从状态A到状态B时过程中有一定的动画效果：

使用CSS的transition可以在一些交互上增添微动效的交互。该方案要控制动画的过程，那相对而言会较难控制。

CSS animation

CSS中的animation和transiton相比最大不同是有一个@keyframes，可以通过@keyframes来定义帧动效，可以在每一帧指定动画元素的各种状态(在帧上设置元素的CSS样式)：

如果你不想手撸一个@keyrames的话，可以借助Chrome的插件keyframes.app来辅助你。比如：

CSS路径动效

在某些场景之下，需要让一个动画对象按照我们指定的一个行动轨迹来运行：

虽然借助@keyframes来绘制动画对象的运行轨迹，但相对而言会较为复杂，而且效果也较难还原。

但CSS的motion-path的出现，可以让这件事情变得更为简易：

CSS Houdini Animation

CSS Houdini可以说是一个好东东，对于广大CSSer而言更是一种福音。他能帮助我们扩展CSS的能力。对于Animation也是一样的，特意有一个Animation方面的内容，即Animation API：

比如下面这样的一个效果：

暴露给CSSer使用的方式也很简单：

.el {
    background-image: url(...);
}
.el::after {
    background-color: hsla(300, 100%, 50%, .75);
    mix-blend-mode: multiply;
}
.el.is-loaded::after {
    mask-image: paint(circle);
}

el.addEventListener('mousemove', evt => {
    el.style.cssText = `--size: 150; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})

el.addEventListener('mouseenter', evt => {
    el.style.cssText = `--size: 150; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})
el.addEventListener('mouseleave', evt => {
    el.style.cssText = `--size: 0; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})

实现该效果的底层源码可以到这里查阅：https://css-houdini.rocks/posts/dynamic-hover-masks/paint.js

JavaScript实现动效

在Web中使用JavaScript实现动效也是最为常见的，而且这方面的能力也非常的强大。时至今日有Web Animation API，Canvas和WebGL等技术手段，而且还有各式各样式的动画库。

Web Animation API

Web Animation API中提供了一些实现Web动效的API，比如：

Animation
KeyframeEffect
AnimationTimeline
AnimationEvent
DocumentTimeline
EffectTiming
document.timeline
document.getAnimations()
Element.animate()
Element.getAnimations()

这些API可以更好的帮助我们实现Web动效。比如使用KeyframeEffect这个API就可以像CSS中的@keyframes一样声明一个Keyframe：

var rabbitDownKeyframes = new KeyframeEffect(
    whiteRabbit, // element to animate
    [
        { transform: 'translateY(0%)' }, // keyframe
        { transform: 'translateY(100%)' } // keyframe
    ],
    { duration: 3000, fill: 'forwards' } // keyframe options
);

如果你对Web Animation API相关的知识感兴趣的话，可以在Twitter上关注@rachelnabors。

他可以说是Web Animation API之父，一直在致力于Web Animation API规范的推进。而且还录制了很多有关于这方面的视频和教程：