滚动动画（跑马灯动画）的几种实现方式
在大屏可视化应用中，滚动动效（跑马灯效果）也是常见的一种数据展现方式，本章节针对字幕滚动和列表滚动效果做一个小小的总结，结合vue框架，具体展示效果如下，从左至右选型技术分别为：marquee标签、css3-animation动画属性、 css3-animation动画属性、Javascript实现滚动动画
文字滚动实现功能描述：
- 文字无限滚动展示，支持鼠标悬浮暂停功能
- 文字滚动速度可控
- 支持接口数据动态渲染，如果数据变化，动画重新开始
列表滚动实现功能描述：
- 列表无限滚动展示、支持鼠标悬浮暂停功能
- 列表滚动速度可控
- 支持接口数据动态渲染，数据变化，动画重新开始
- 支持鼠标滚动操作、可上滑至动画开始处或下滑至动画结束处
- 每页展示列表项数量可控
功能实现分析：
常规动画类的实现效果，无非有三种方式：其一是借助原生html标签-marquee实现滚动效果；其二是通过css3相关动画属性实现动画效果；其三是使用javascript结合定时器，通过轮询实现相关属性动态变化的动画效果；当然每一种实现方式都有各自的优缺点，大家可以根据需要进行技术选型，本章针对相关实现原理进行简单阐述。
这里使用静态数据模拟接口数据，具体数据格式如下
// data.js
export let datas1 = `Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty中的
访问器属性中的 get和 set方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用
get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者
Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新
虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到
真实 DOM 树上`export let datas2 = `《意见》明确，保障性租赁住房主要解决符合条件的新市民、青年人等群体的住房困难问题，
以建筑面积不超过70平方米的小户型为主，租金低于同地段同品质市场租赁住房租金；由政府给予政策支持，充分发挥
市场机制作用，引导多主体投资、多渠道供给，主要利用存量土地和房屋建设，适当利用新供应国有建设用地建设。
城市人民政府要坚持供需匹配，科学确定“十四五”保障性租赁住房建设目标和政策措施，制定年度建设计划，
并向社会公布；加强对保障性租赁住房建设、出租和运营管理的全过程监督，强化工程质量安全监管。
城市人民政府对本地区发展保障性租赁住房负主体责任，省级人民政府负总责。`export let datas3 = [{content: "内容一",bgColor: "#08a6e9",},{content: "内容二",bgColor: "#22d4c8",},{content: "内容三",bgColor: "#ffa06a",},{content: "内容四",bgColor: "#0f96f0",},{content: "内容五",bgColor: "#ffa66a",}
];export let datas4 = [{content: "content-1",bgColor: "#08a6e9",},{content: "content-2",bgColor: "#22d4c8",},{content: "content-3",bgColor: "#ffa06a",},{content: "content-4",bgColor: "#0f96f0",},{content: "content-5",bgColor: "#ffa66a",}
];一、marquee标签实现文字滚动动画（对应图片第一个）
1.在组件中使用
{{ content }}
2.marquee标签的实现方式非常简单、只需要添加对应的属性即可，针对开发者非常友好。但是它是一个过时的标签、另外无法实现无缝滚动效果，难以应对复杂的需求场景、因此在项目中应用场景并不多。
二、css3-animation实现文字滚动效果（对应图片第二个）
1.首先封装一个文字滚动组件，代码如下
2.组件调用
3.使用animation实现稍微有点复杂，比如：数据列表数量时多时少，这就需要动态计算动画时长；其次实现无缝滚动需要动态计算内容高度，判断是否需要追加数据，双份数据或单份数据；另外当列表数据变化时列表动画重新开始也需要做特殊处理。但优势也非常明显，无需开发者关注动画性能问题、动画效果流畅、全程css控制仅需少量的javascript进行控制，改实现方式在实际开发中应用较多，推荐使用。
三、css3-animation实现列表滚动效果（对应图片第三个）
1.组件封装
- {{ item.content }}
2.列表滚动-css3实现方式和css3-文字版实现原理大致一样，具体实现方式可查看以上代码和备注文字描述。该方式是通过列表容器位移实现的，适应于大部分的场景。如果有特殊需求，比如：可通过鼠标滑动列表，就需要通过javascript控制了。
四、Javascript实现滚动效果（对应图片第四个）
1.该实现方案是在“案例三”的基础上增加了鼠标滚轮滑动操作，通过动态改变scrollTop属性实现滚动展示，相比css控制，这种控制方式具有更强的可塑性
2.代码如下：
- {{ item.content }}
总结：每一种实现方案都有自己的使用场景，大家可以结合实际需求进行技术选型，掌握了滚动动画实现的原理，就可以在实际开发中得心应手。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！