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



目录
相关文章
|
7月前
|
图形学
【unity实战】时间控制 昼夜交替 四季变化 天气变化效果
【unity实战】时间控制 昼夜交替 四季变化 天气变化效果
175 0
|
6月前
|
流计算 Python
Python实现动态银河系:模拟旋转的银河动画
Python实现动态银河系:模拟旋转的银河动画
80 0
|
8月前
r语言绘制动态统计图:绘制世界各国的人均GDP,出生时的预期寿命和人口气泡图动画动态gif图
r语言绘制动态统计图:绘制世界各国的人均GDP,出生时的预期寿命和人口气泡图动画动态gif图
|
8月前
|
编解码 数据可视化
R语言动态可视化:绘制历史全球平均温度的累积动态折线图动画gif视频图
R语言动态可视化:绘制历史全球平均温度的累积动态折线图动画gif视频图
|
编解码
PIE-engine 教程 ——全球夜间灯光指数动画加载含ui.legend图例添加
PIE-engine 教程 ——全球夜间灯光指数动画加载含ui.legend图例添加
374 0
PIE-engine 教程 ——全球夜间灯光指数动画加载含ui.legend图例添加
|
Java Spring
SwiftUI—制作spring样式时间曲线的旋转动画
SwiftUI—制作spring样式时间曲线的旋转动画
341 0
【PR】如何做一个图片动画出场
【PR】如何做一个图片动画出场
168 0
【PR】如何做一个图片动画出场
SwiftUI直通车系列(5)—— 自定义绘制
SwiftUI直通车系列(5)—— 自定义绘制
153 0
SwiftUI直通车系列(5)—— 自定义绘制
|
传感器 编解码 算法
Google Earth Engine ——MOD16A2第6版蒸发/热量通量产品是一个以500米像素分辨率制作的8天综合产品,两个潜热层(LE和PLE)的像素值是综合期内所有8天的平均值500m分辨
Google Earth Engine ——MOD16A2第6版蒸发/热量通量产品是一个以500米像素分辨率制作的8天综合产品,两个潜热层(LE和PLE)的像素值是综合期内所有8天的平均值500m分辨
583 0
Google Earth Engine ——MOD16A2第6版蒸发/热量通量产品是一个以500米像素分辨率制作的8天综合产品,两个潜热层(LE和PLE)的像素值是综合期内所有8天的平均值500m分辨
|
存储 传感器 编解码
三星Note10渲染图曝光:超窄边框+挖孔屏
三星Note10系列成为了今年下半年最受期待的旗舰机之一,目前首张官方渲染图已经被国外网友曝光。据悉,三星Note10系列采用的是方正设计,屏幕中间挖孔,机身前面板拥有更高的屏占比,基本上跟此前的传闻相吻合。
269 0
三星Note10渲染图曝光:超窄边框+挖孔屏