使用css3 animation 动画做一个轮播图的引导动画

最近在开发小程序,有个商品列表页面需要给图片添加轮播图功能,方便用户在外面即可滑动查看单品的展示图,但并不想要展示轮播图的dot,而是希望通过一个引导动画告诉用户当前是一个轮播图,你可以通过左右滑动来查看图片,发现通过 css3 animation 既可快速实现。

效果如下:

如果有想要体验线上效果的朋友可以扫描下方小程序码

使用css3 animation 动画做一个轮播图的引导动画

关于 animation

CSS animation 属性是 animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

缩写形式:

  animation: name duration timing-function delay iteration-count direction fill-mode;
  • animation-name

animation-name 属性指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列。

/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset
  • animation-duration

animation-duration属性指定一个动画周期的时长。

animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms
  • animation-timing-function

CSS animation-timing-function 属性定义 CSS 动画在每一动画周期中执行的节奏。可能值为一或多个

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
  • animation-delay

animation-delay CSS属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度。

animation-delay: 3s;
animation-delay: 2s, 4ms;
  • animation-iteration-count

animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是 1 次 无限循环。

/* 值为关键字 */
animation-iteration-count: infinite;

/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;
  • animation-direction

animation-direction CSS 属性指示动画是否反向播放,它通常在简写属性animation中设定

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
  • animation-fill-mode

CSS 属性 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

以上便是关于 animation 动画的介绍

轮播图引导动画需求分解

1、点击底部导航商城icon跳转至商城页触发该动画
2、跳转至商城页,蒙版和指示器同时渐变出现(渐变时间1s,蒙版不透明度从0%-50%)
3、指示器开始从右往左运动,同时渐变消失,缩略图同时向左滑动一张(运动时间1s,运动距离从距离该缩略图右边距20处,运动至左边距20)
4、指示器从消失点运动至初始位置(渐变出现,时间50ms)
5、指示器开始从右往左运动,同时渐变消失,缩略图同时向左滑动一张(运动时间1s,运动距离从距离该缩略图右边距20处,运动至左边距20)
6、蒙版渐变消失(渐变时间300ms,蒙版不透明度从50%-0%)

根据上述引导动画需求分解,不难看出这个动画的实现需要多个 dom 且多个 animation 动画结合在一起才可实现。

这里还有个需求,当轮播图大于2张的时候,引导动画需要左滑两次,否则滑动一次即可,那么这里还要写另外一套的动画。

示例demo

这里我单独写一个demo方便大家查看源码和demo预览

demo示例我放到了我之前搭建的一个小程序开发模版中,方便大家查看
miniprogram-template

本文正在参加「金石计划」 ”

原文链接:https://juejin.cn/post/7213744141715636279 作者:只会番茄炒蛋

(0)
上一篇 2023年3月24日 下午12:03
下一篇 2023年3月24日 下午12:20

相关推荐

发表评论

登录后才能评论