SwiftUI—色相和亮度的复合动画的制作

简介: SwiftUI—色相和亮度的复合动画的制作

本节课演示色相和亮度的复合动画,动画以线性的时间曲线进行播放,并且时长为两秒。


示例代码:


struct ContentView : View {
    @State var radius: Double = 0 //阴影的半径
    @State var brightness: Double = 0 //图像视图的亮度
    var body: some View {
        VStack{
            Image("logo")
                .shadow(radius: CGFloat(radius)) //按照属性的大小修改图像视图的阴影半径
                .brightness(brightness) //按照浮点属性的大小修改图像视图的亮度
                .animation(.linear(duration: 2)) //设置动画的时间曲线为linear线性样式,并设置动画的时长为两秒
            Divider().fixedSize()
            Button(action: {
                self.radius += 10
                self.brightness = 1
            }) {
                Text("Move Effect")
            }            
        }        
    }
}


微信图片_20220523165226.png


目录
相关文章
|
6月前
|
图形学
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
83 1
|
5月前
|
Python
Python制作动态颜色变换:颜色渐变动效
Python制作动态颜色变换:颜色渐变动效
103 0
|
5月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
438 0
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
247 0
|
图形学 流计算
GLTF编辑器教你区分自发光贴图和光照贴图
自发光贴图主要用于模拟物体表面的发光效果,突出特定区域或绘制发光字体等。而光照贴图则用于模拟场景中光源的间接照明效果,提高渲染效率和实现真实的光照效果
379 0
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
328 1
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
503 0
效果处理(内阴影、外阴影、外发光、内发光、投影)
效果处理(内阴影、外阴影、外发光、内发光、投影)
效果处理(内阴影、外阴影、外发光、内发光、投影)
|
并行计算 iOS开发 MacOS
Metal每日分享,自然饱和度滤镜效果
Metal每日分享,自然饱和度滤镜效果
Metal每日分享,自然饱和度滤镜效果
|
API
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴
478 0
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴