SveletJs学习——运动动画
介绍
设置值并且查看DOM自动更新这个过程非常酷,渐变这些值,在svelte中有一些工具,可以帮助您构建使用动画来传达流畅的用户界面
svelte/motion模块导出两个函数: tweened 和 spring。用于创建writable(可写)store,其值会在set 和 update之后更新,而不是立即更新。
1. 渐变动画效果 Tweened
1.1 示例
当我们在进度条发生变化的时候,可以设置对应的进度值,展示当前的完成度,代码如下:
<script>import { writable } from "svelte/store";const progress = writable(0)
</script>
<main><progress value={$progress}></progress><button on:click="{() => progress.set(0)}">0%</button><button on:click="{() => progress.set(0.25)}">25%</button><button on:click="{() => progress.set(0.5)}">50%</button><button on:click="{() => progress.set(0.75)}">75%</button><button on:click="{() => progress.set(1)}">100%</button>
</main>
<style>progress {display: block;width: 100%;}
</style>
从实现效果中我们可以发现,当点击对应进度的时候这个效果非常生硬,值直接变成了对应的值,我们想要一个平滑的动画效果,还需要对内容进行完善。此时我们可以从svelte/motion中引入一个动画效果tweened。
此时我们可以修改一下进度定义progress方式:
import { tweened } from 'svelte/motion'const progress = tweened(0, {duration: 400})
这时我们会发现进度条到对应位置时,是平滑过去的,此时我们可以对实现的动画效果类型进行定义
import { tweened } from 'svelte/motion'import { cubicOut } from 'svelte/easing'const progress = tweened(0, {duration: 400,easing: cubicOut})
1.2 参数含义tweened(value: any, options)
const progress = tweened(0, {duration: 400,easing: cubicOut
})
0表示进度初始值,后面的对象内容表示动画相关的配置信息
- delay: 在渐变动画开始时有多少延迟等待时间
- duration: 动画持续时间
- easing: 函数,缓动样式,多种样式可在
svelte/easing'
包中选择 - interpolate: 函数
import { interpolateLab } from 'd3-interpolate';
const color = tweened(colors[0], {duration: 800,interpolate: interpolateLab
});
2. 弹簧动画效果 Spring
弹簧函数是补间动画的另一种选择,它通常对频繁变化的值更有效。
2.1 示例
以下动画效果为:有一个红色的圆点,在鼠标在对应区域移动时,红点会跟随鼠标一起动
<script>import { writable } from 'svelte/store'let coords = writable({ x: 50, y: 50}); // 红点坐标初始位置let size = writable(10); // 红点初始尺寸
</script>
<main><div style="position: absolute; right: 1em;"><label for=""><h3>stiffness ({coords.stiffness})</h3><input type="range" bind:value={coords.stiffness} min="0" max="1" step="0.01"></label><label for=""><h3>damping ({ coords.damping })</h3><input type="range" min="0" max="1" step="0.01" bind:value={coords.damping}></label></div><svgon:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"on:mousedown="{() => size.set(30)}"on:mouseup="{() => size.set(10)}"><circle cx={$coords.x} cy={$coords.y} r={$size}></circle></svg>
</main>
<style>svg { width: 100%; height: 500px; margin: -8px; }circle { fill: #ff3e00 }
</style>
上述动画效果我们在执行时会发现,右侧的两个功能栏没有用上,修改一下代码让功能栏可以进行配置
import { spring } from 'svelte/motion';let coords = spring({x: 50, y: 50}, {stiffness: 0.1, // 控制弹簧速度,值越大,弹簧效果越明显damping: 0.25 // 控制弹簧摇摆幅度,值越小,摇摆效果越明显})let size = spring(10)
2.2 参数含义 spring(value: any, options)
- value: 初始默认位置
- options:动画效果配置
spring(弹性) store通过stiffness和 damping参数逐步变更到目标值,而tweenedstore在改变一个固定时间变更其值。store在由它们现有速度决定的持续时间长短,从而实现更自然的运动效果。
- stifness(number, 默认值 0.15) - 取值范围0~1,数值越大效果越生硬(例:灵敏度,数值越大,灵敏性越强)
- damping(number, 默认值 0.8) - 取值范围0~1,数值越小阻尼越小(例:惯性,数值越小惯性越大)
- precision(numer, 默认值 0.001) - 粒度。用于控制上面两个参数的运动幅度大小
官方文档
如果有用,点个赞呗~
总结用法,希望可以帮助到你,
我是Ably,你无须超越谁,只要超越昨天的自己就好~
SveletJs学习——运动动画相关推荐
- UE4 学习记录二 给角色添加骨架,皮肤,及运动动画
这只是用来记录我学习UE4过程的,可能帮不到你,先说声抱歉.为了防止误导他人,请勿转载,请勿转载,请勿转载. 本文的主题是给角色添加骨架.皮肤.运动动动画.总章目录(https://blog.csdn ...
- js运动动画的八个知识点
今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval( ...
- [0 to 0.5]从零开始学习Android动画知识(中)
[0 to 0.5]从零开始学习Android动画知识(中) 属性动画(Property Animation) 属性动画(Property Animation)是在 Android 3.0(API 1 ...
- iOS学习——核心动画之Layer基础
iOS学习--核心动画之Layer基础 1.CALayer是什么? CALayer我们又称它叫做层.在每个UIView内部都有一个layer这样一个属性,UIView之所以能够显示,就是因为它里面有这 ...
- 学习UE4动画蓝图:实现双脚贴地
目标 在上一篇博客<学习UE4动画蓝图:配置脚部IK>中,IK功能解决了"脚部陷入地下"的问题,但是还是有"脚部悬空"的问题.<[UE4蓝图] ...
- 系统学习iOS动画之六:3D动画
本文是我学习<iOS Animations by Tutorials> 笔记中的一篇. 文中详细代码都放在我的Github上 andyRon/LearniOSAnimations. 到目前 ...
- kotlin设置按钮不可点击_3dmax渲染720全景效果图动画流程,学习VR动画不可错过的必备知识...
3dmax渲染720全景效果图动画流程,学习VR动画不可错过的必备知识 7 20全景效果图是这几年全国兴起的一门小技术,是适应快速.立体.多方位看图的一个重要方法.今天我就来说一下,制作720全景动画 ...
- 几步教会你用solidworks实现小汽车的运动动画
几步教会你用solidworks实现小汽车的运动动画 要用solidworks软件实现一辆汽车的仿真运动该如何做呢?在这里要用到上次介绍的旋转马达,另外需要用到线性马达.接下来我说说具体的操作方式. ...
- [0 to 0.5]从零开始学习Android动画知识(下)
[0 to 0.5]从零开始学习Android动画知识(下) 矢量动画(Scalable Vector Graphics) 不同于前面的为控件做动画效果的方法,矢量动画则是为图形做出动画效果 矢量图 ...
最新文章
- python教材免费版-北大内部教材python版算法与数据结构PDF电子书免费下载
- VMware vSphere 5.1 群集深入解析(二十一)- 存储I/O控制(SIOC)
- java中的输入流类,Java数据输入流类
- python 文件分割 按大小_python处理分隔大文件
- c语言的报告一,C语言实验报告(一).doc
- 面向对象六大原则详解
- bzoj1218[HNOI2003]激光炸弹
- 导入数据库时报错的解决办法汇总
- 在SQL Server2012上搭建Northwind详细教程,SQL2000SampleDb.msi的资源
- linux微软雅黑字体库_Linux_Debian系统中安装微软雅黑字体的教程,想在linux下添加微软雅黑的字 - phpStudy...
- 将Excel数据批量生成条形码
- Java面向对象编程——包(package)
- 计算机考研金工,我的金工跨考经验
- access工资明细表_利用ACCESS数据库报表功能制作工资条
- 倒是应该看看教科书了
- 前端应届生如何做一个职业规划?已拿offer附真题解析
- Java分布式中文分词组件 - word分词
- 【兴趣】日语(2021年3月24~)
- 白话CMPP、SGIP
- 增加/删除临时IP地址