首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端复杂运营页解决方案的探索和实践

我切过的页面包括纯静态2D展示页面、对接动态数据的页面和和对接动态数据 + 3D 展示的页面。 纯静态页面是最古老的 H5,主要在于通过酷炫效吸引眼球。...页面进入时,播放下方的动画。 在我们平台中使用了一个时间线的模式来管理动画的次序。实际上这种类似的动画在CSS里面对于配置项已经有了很好的总结。...在CSS中能够配置的项有动画时长、动画延时、动画重复次数以及动画播放的方向。 在我们的平台中也是通过可视化的方式来对这几个CSS的项进行配置,然后以内联形式写入style。...播放方式在CSS里实现了顺序播放和逆序播放。 事件机制 事件机制目前实现了一些比较简单的功能,例如当点击时控制一个组件的显示和隐藏。...这个事件在我们平台目前分为控制和链接。控制就是当点击某个选中的组件时,另一个会显示或隐藏。如果它是一个video或音频类型,还会有播放暂停的行为。

1.5K70

深入浅出 CSS 动画

CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。 动画包括两个部分: 描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。...animation-delay:设置延时,即从元素加载完成之后到动画序列开始执行的这段时间。 animation-direction:设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。...缓函数在动画中非常重要,它定义了动画在每一动画周期中执行的节奏。...缓主要分为两: cubic-bezier-timing-function 三次贝塞尔曲线缓函数 step-timing-function 步骤缓函数(这个翻译是我自己翻的,可能有点奇怪) 三次贝塞尔曲线缓函数...类似于视频播放器的开始和暂停。是 CSS 动画中有限的控制动画状态的手段之一。

1.8K40
您找到你想要的搜索结果了吗?
是的
没有找到

2019年了,你还不会CSS动画?

图效果如下: ? 就是需求这么简单的一个动画,然而绝大多数人却不能答对。 不卖关子,我的答案是: ? 大部分面试者说,关于 CSS 动画,也看过一些教程,工作中却不怎么使用,因此就忘了。...CSS动画,也称关键帧动画。通过 @keyframes 来定义关键帧。帧的概念,想必大家很清楚,比如电影就是一帧帧图片在播放,利用图像在人脑中短时间停留来形成动态效果。CSS 动画也是利用这个原理。...设置动画延迟 1s 后执行,且填充模式为 backwards 时,可以看到动画在开始前是处于 100px 处,动画结束后回到 0px 处: ? 最后设置填充模式为 both 的情形: ?...CSS 动画是可以暂停的。属性 animation-play-state 表示动画播放状态,默认值 running 表示播放, paused 表示暂停: ?...另一个播放方向 animation-direction,它的意思说指定动画按照指定顺序来播放 @keyframes 定义的关键帧。其值有: normal 默认值。

41530

你离高效制作动画只差一篇文章的距离

爱的是加上动画效后H5会变得生动有趣,吸引力Max;恨的是做动画时都是一边在脑海中yy效果,一边用css、js代码模拟出来,既低效又不直观,正所谓“产品一句话,设计一根线,重构一身汗”。...2.图形graphic和影片剪辑movie clip       这两元件在制作动画时会经常打交道,这个需要了解清楚。(敲黑板!!!)      ...我们看到例子里蜘蛛的下落有一个duang一下的弹簧效果,这个在补间里设置一下缓函数就行了。常用缓函数的选择是2018版本新增的,个人感觉十分实用。      ...在Animate CC里制作动画是有fps的概念的,即每秒播放多少帧。在js里我们一般怎样控制帧率呢?没错,就是setTimeout或者setInterval,也正是这个原因,动画在安卓机里播放卡顿。...在一次动画测试中,我发现制作的动画在手机上越来越卡。使用chrome的memory检测后,发现了有内存泄露,且上升速度很快。

1.2K20

CSS3动画属性 animation详解(看完就会)

看这个就够了 详解 CSS3中最好用的布局方式——flex弹性布局(看完就会) [前端CSS高频面试题]如何画0.5px的边框线(详解) CSS3基础属性大全 CSS3动画属性 animation详解(...animation-play-state animation-direction  animation-fill-mode  animation ---- keyframes 用 keyframes定义动画,写上动画要执行的内容, (类似选择器.../head>  刷新之后就自动触发动画...动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。...alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 initial 设置该属性为它的默认值。请参阅 initial。

87630

CSS3动画的使用

0921自我总结 CSS3动画的使用 一.动画的创建 @keyframes规则是创建动画 浏览器兼容 1、@keyframes myfirst 2、@-webkit-keyframes myfirst.../ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } 上面如果有前缀下面使用的时候必须加上前缀 二.css3...动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。...alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 initial 设置该属性为它的默认值。请参阅 initial。...动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。

79910

前端开发中web和移动端动画的常见实现方式

动画SVG 动画Canvas 动画WebGL 动画gif 图图片+位移模拟动画视频flash 动画css 动画css 动画应该是前端工作中用得最多的,兼具性能和丰富的动画效果,很多常见的第三方动画库也都是基于...函数直接设置要多少步animation-delay:动画开始前延迟的时长animation-iteration-count:动画次数,无限循环 infiniteanimation-direction:设置是否可以反向播放动画...animation-fill-mode:设置 CSS画在执行之前和之后如何将样式应用于其目标,一般用来解决动画停止后界面闪现问题animation-play-state:设置动画是运行还是暂停,可以配合...gif 图设计师直接导出 gif 图,适合一些简单的动画,直接利用 PS 里的动作就可以完成制作,基本没啥前端工作量,简单适配性好不过容易出现颜色失真或者边缘出现锯齿。...flash 动画flash 动画是一种基于 Adobe Flash 技术创建的动态图像或影片,它可以在网页中播放

48620

HarmonyOS-UIAbitity-枚举说明——【坚果派-红目香薰】

FillMode 名称 描述 None 动画执行时不会将任何样式应用于目标,动画播放完成之后恢复初始默认状态。 Forwards 目标将保留动画执行期间最后一个关键帧的状态。...PlayMode 名称 描述 Normal 动画按正常播放。 Reverse 动画反向播放。 Alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。...AlternateReverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 KeyType 名称 描述 Down 按键按下。 Up 按键松开。...TransitionType 名称 描述 All 指定当前的Transition效生效在组件的所有变化场景。 Insert 指定当前的Transition效生效在组件的插入场景。...Delete 指定当前的Transition效生效在组件的删除场景。

11910

CSS3 动画属性

animation-duration设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间, 其基本语法如右所示: animation- duration: < time...normal, 如果设置为normal时, 动画的每次循环都是向前播放另一个值是alternate,它的作用是,动画播放为偶数次则向前播放,为奇数次则向反方向播放。...设置动画时间外属性 animation-fill-mode animation-fill-mode属性定义在动画开始之前和结束之后发生的操作,其基本语法如右所示: animation-fill-mode...当其取值为forwards时,动画在结束后继续应用最后关键帧的位置。当其取值为backwards时,会在向元素应用动画样式时迅速应用动画的初始帧。...简单地理解就是告诉动画在第一个关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画第一帧 上, 或者同时具有这两个效果。

1.1K20

基于 React 实现一个 Transition 过渡动画组件

基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的动画效果,也就是通过添加或移除某个 class 样式。...实现 Animate.css 兼容 Animate.css 是一款强大的预设 CSS3 动画库。接下来,实现在 Transition 组件中使用 Animate.css 实现强大的 CSS3 动画。...由于 Animate.css画在进入动画和离开动画通常使用两个效果相反的 class 样式,因此,需要给 Transition 组件添加 enterClass 和 leaveClass 两个属性,实现动画切换...动画通常可以设置延迟时间,播放时长,播放次数等属性。因此,需要给 Transition 添加这些属性,来丰富设置动画。...count:规定动画应该播放的次数。 easing:规定动画的速度曲线。 reverse:规定是否应该轮流反向播放动画。

5.8K20

两种方案开发小程序动画

添加效 实例创建完成之后,基于该实例,添加需要的动态效果,动态类型可以查阅文档得知,以最常见的移动,旋转为例: animation.translate($width, 0).rotate($deg...通过这种方法产生的动画,无法按照原有轨迹收回,所以在事件之后设置了定时器,定义在执行动画2s之后,执行另一个动画。同时动画只能执行一次,如果需要循环的效,要在外层包裹一个重复执行的定时器到。...二、音乐播放动画 上面的模块移动动画不涉及逻辑交互,因此新尝试了一个音乐播放动画,该动画需要实现暂停、继续的效果。 动画效果: ?...的添加与删除。...暂停之后继续动画,需要从原有角度继续旋转,因此变量i需要为全局变量。 代码变化 下图可以看出,api方式旋转是通过不断累加角度来完成,而非css3中循环执行。 ?

2K20

两种方案开发小程序动画

添加效 实例创建完成之后,基于该实例,添加需要的动态效果,动态类型可以查阅文档得知,以最常见的移动,旋转为例: animation.translate($width, 0).rotate($deg...通过这种方法产生的动画,无法按照原有轨迹收回,所以在事件之后设置了定时器,定义在执行动画2s之后,执行另一个动画。同时动画只能执行一次,如果需要循环的效,要在外层包裹一个重复执行的定时器到。...二、音乐播放动画 上面的模块移动动画不涉及逻辑交互,因此新尝试了一个音乐播放动画,该动画需要实现暂停、继续的效果。...的添加与删除。...暂停之后继续动画,需要从原有角度继续旋转,因此变量i需要为全局变量。 代码变化 下图可以看出,api方式旋转是通过不断累加角度来完成,而非css3中循环执行。

13210

Web高性能动画及渲染原理(1)CSS动画和JS动画

CSS动画简洁高效,提升交互体验而编写的代码可以轻松地和主要业务逻辑之间实现隔离,开发中建议优先使用;而当你需要更丰富的缓函数,多对象关联动画或是需要在动画执行的特定时间点关联一些其他的业务逻辑等需要细节控制的场景中...首先通过JS脚本来修改指定元素的样式或是名是可行的,另一种方式就是利用带有交互事件属性的CSS(例如:hover或是:focus),当对应的事件触发时,新的样式就会作用于指定元素,这种特性也可以理解为...使用@keyframes定义动画时通常需要指定from和to两个状态(也可以使用0和100%),这意味着开发者只要按照语法要求去定义一个动画过程,它至少会包含两个关键帧,所以即使没有CSS或JS脚本的帮助...本节所说的JS动画,既包括在脚本中修改元素名或动画样式的方式,也包括区别于【关键帧动画】的另一种形式——【逐帧动画】。...例如一段通过按钮点击来控制动画暂停和播放的代码: function bindControl(){ let flag = true; let dom = document.querySelector

7.5K30

如何使用CSS创建高级动画,这个函数必须掌握

"的动画 如何将动画相互叠加以创建一个高级动画 如何通过应用上面学到的两点来创建一个过山车动画 什么是贝塞尔曲线 CSS中的 cubic-bezier 函数是一个缓函数,可以让我们完全控制动画在时间上的表现...什么是缓函数? 线性曲线 想象两个点P0和P1,其中P0是动画的起点,P1是结束点。现在想象另一个点在两点之间线性移动,如下所示 这就是所谓的线性曲线,也是最简单的动画。...这个动画是由2个动画组成的,一个是沿x轴的动画,另一个是沿y轴的动画。X轴动画是一个沿X轴的普通线性动画。...添加水平空间 快完成了,最后 只需要在动画之后沿着x轴移动球,这样球就不会像上图中那样在循环之后完全停止。...我们还介绍了贝塞尔以及如何使用它们来创建你自己的缓函数。建议大家自己多多动手,才能更好的掌握 css 动画。 来源:https://www.smashingmagazine....

6.8K20

是的!Figma也可以用时间轴做超级流畅的动画了

播放/停止 ? 当前时间位置/总时间 在左侧面板中,我们可以按名称搜索图层和/或使用关键帧过滤图层。如果在Figma中选择任何内容,则可以看到文件的图层,但是没有子图层。...点击播放,然后就可以看到Figma中的矩形开始啦!恭喜! ? 通过这种方式,您可以为看到的所有属性设置动画。...如果将缓功能设置为缓出,动画将看起来更加自然。选择结束关键帧,双击它以打开关键帧面板。您将看到“线性”缓功能。将其更改为“缓出”。 ? 点击播放按钮 ? 现在到500ms的位置上。...在700ms时间位置为275添加Y的另一个关键帧,并将上一个关键帧更改为250。 ? 点击播放。 ? 现在,我们应该将Y和Height缓函数的最后一个关键帧从Linear更改为Ease-out。...点击播放。 ? 现在,让我们将圆移到其原始位置。加上宽度为500ms的时间位置的关键帧(Y值),高度值150,和缓消失动画。 ? 点击播放。 ? 相当不错的小球。

17.3K34
领券