SwiftUI—制作渐缓时间曲线的位移动画

简介: SwiftUI—制作渐缓时间曲线的位移动画

通过offset、animation方法,实现easeOut类型的位移动画,并设置动画的时长为2秒,位移动画以减缓的时间曲线进行。


示例代码:


struct ContentView : View {
    @State var distance: Double = 0 //图像视图的位移距离
    var body: some View {
        VStack{
            Image("logo")
                .offset(x: 0, y: CGFloat(distance)) //按照属性的大小,在垂直方向上移动视图
                .animation(.easeOut(duration: 2)) //设置动画的时长为2秒,动画的时间曲线为easeOut渐缓,也就是说在指定距离的位移动画中,刚开始的位移速度较快,动画快要结束时的位移速度较慢
            Divider().fixedSize()
            Button(action: {
                self.distance -= 120 //当按钮被点击时,将属性的值减少120,也就是将图像视图向上移动120点的距离
            }) {
                Text("Move Effect")
            }
        }
    }
}


2466108-9d0cd9b47d9127f3.gif



目录
相关文章
|
2天前
|
图形学
【unity实战】时间控制 昼夜交替 四季变化 天气变化效果
【unity实战】时间控制 昼夜交替 四季变化 天气变化效果
7 0
|
8月前
|
图形学
不断涌出的爱意,使用SwiftUI搭建一个爱心粒子动画~
不断涌出的爱意,使用SwiftUI搭建一个爱心粒子动画~
100 0
|
12月前
|
JSON 前端开发 测试技术
Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
595 1
【Unity3D--自由观察模型】模型自动旋转+触屏旋转和缩放
展示3D模型,同时实现模型自动旋转和触屏旋转和缩放
275 0
|
JSON 定位技术 数据格式
基于GEE的制作全球任意地方时间序列数据动画的方法
基于GEE的制作全球任意地方时间序列数据动画的方法
142 0
|
数据采集 数据可视化 数据挖掘
还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
本文讲解9种『炫酷高级』的数据图表,可视化地表示比例或百分比:哑铃图、甜甜圈图、华夫饼图、堆积条形图...附上代码,快快用起来吧!
807 2
还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
|
存储 程序员
七夕快到了,用SwiftUI做一个表达爱意的心形动画
传统的七夕快到了,作为一个程序猿,最浪漫的礼物当然是自己写的啦! 思来想去也不知道写什么好,在某天在某音上学习时看到点赞的动画效果还不错,那不如就做一个表达爱意的动画吧。
314 0
七夕快到了,用SwiftUI做一个表达爱意的心形动画
动画曲线天天用,你能自己整一个吗?看完这篇你就会了!
一旦用到动画,曲线 Curve 类不可避免会用到,但是用了那么多,你真的了解怎么用吗?本篇为你详细解读 Curve 类的实现,看完你就会设计自己的动画曲线了!
134 0
动画曲线天天用,你能自己整一个吗?看完这篇你就会了!
|
Java Spring
SwiftUI—制作spring样式时间曲线的旋转动画
SwiftUI—制作spring样式时间曲线的旋转动画
293 0
SwiftUI—制作spring样式时间曲线的旋转动画
SwiftUI—色相和亮度的复合动画的制作
SwiftUI—色相和亮度的复合动画的制作
115 0
SwiftUI—色相和亮度的复合动画的制作