Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在SwiftUI中动画化核心图像过滤器

如何在SwiftUI中动画化核心图像过滤器
EN

Stack Overflow用户
提问于 2022-06-27 09:47:03
回答 1查看 64关注 0票数 -1

我想应用一个给定的CIFilter,但不是立即显示的效果,我想动画它。例如,我希望将一幅彩色图像去饱和为超过2秒的灰度,或者通过使用EaseInOut动画曲线在0.8秒以上将其去解析成全分辨率图像来解析块图像。

如果您使用的是内置的SwiftUI视图修饰符之一,比如.blur(),那么您就是黄金。只要附加一些.animate()变体,您就完成了。

但是,考虑到您必须跳过UIImage、CGImage、CIImage路由,或者是WWDC 2022示例代码中的MTLView、CIRenderDestination、ContentView示例,我有点困惑。

理想情况下,我想我只想为我想做的每一个效果编写视图修饰符,这样它们就可以和SwiftUI内置的效果一样可用,但我不知道这是否可能。有一种幸运的方法吗?有什么想法吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-27 12:28:14

下面是一种适应Animatable的方法。您可以轻松地使其适应您的需要:

代码语言:javascript
运行
AI代码解释
复制
struct ContentView: View {
    
    @State private var animate = false

    var body: some View {
        VStack {
            PixellatedImage(imageName: "yoga", scale: animate ? 100 : 1)
                .scaledToFit()
        }
        .padding()
        .onAppear {
            withAnimation(Animation.linear(duration: 3.0).repeatForever()) {
                self.animate.toggle()
            }
        }
    }
}


struct PixellatedImage: View, Animatable {
    
    let imageName: String
    var scale: CGFloat
    
    var animatableData: CGFloat {
        get { scale }
        set { scale = newValue }
    }
    
    var body: some View {
        Image(uiImage: pixellatedImage(imageName: imageName, scale: scale))
            .resizable()
    }
}


func pixellatedImage(imageName: String, scale: Double) -> UIImage {
    if let inputImage = UIImage(named: imageName) {
        let context = CIContext(options: nil)
        
        if let currentFilter = CIFilter(name: "CIPixellate") {
            let beginImage = CIImage(image: inputImage)
            currentFilter.setValue(beginImage, forKey: kCIInputImageKey)
            currentFilter.setValue(scale, forKey: kCIInputScaleKey)
            
            if let output = currentFilter.outputImage {
                if let cgimg = context.createCGImage(output, from: output.extent) {
                    let processedImage = UIImage(cgImage: cgimg)
                    return processedImage
                }
            }
        }
    }
    return UIImage() // empty default instead of nil
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72776365

复制
相关文章
如何在SwiftUI中实现interactiveDismissDisabled
由于健康笔记[2]中数据录入都是在Sheet中进行的,为了防止用户在录入过程中由于误操作(使用手势取消Sheet)丢失数据,因此,从最初的版本开始,我就一直使用各种手段加强对Sheet的控制。
东坡肘子
2022/07/28
4K0
如何在SwiftUI中实现interactiveDismissDisabled
SwiftUI 的动画机制
大多初学者都会在第一时间惊叹于 SwiftUI 轻松实现各种动画效果的能力,但经过一段时间的使用后,他们会发现 SwiftUI 的动画并非像表面上看起来那样容易驾驭。开发者经常需要面对:如何动、怎么动、什么能动、为什么不动、为什么这么动、如何不让它动等等困扰。对 SwiftUI 的动画处理逻辑了解的不够深入是造成上述困扰的主要原因。本文将尝试对 SwiftUI 的动画机制做以介绍,以帮助大家更好地学习、掌握 SwiftUI 的动画,制作出满意的交互效果。
东坡肘子
2022/07/28
14.9K0
SwiftUI 的动画机制
SwiftUI案例:Lottie载入动画
动画资源来自:https://lottiefiles.com; 需要用到用到CocoaPods下的命令 pod 'lottie-ios',环境配置如下;
DioxideCN
2022/08/05
1.6K0
SwiftUI案例:Lottie载入动画
如何在 SwiftUI 中创建条形图
条形图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例。本文将展示如何创建一个垂直条形图,其中矩形的高度将代表每个类别的值。
Swift社区
2022/12/12
5.4K0
如何在 SwiftUI 中创建条形图
高级 SwiftUI 动画 — Part 2:GeometryEffect
在本系列的第一部分,我介绍了Animatable协议,以及我们如何使用它来为路径制作动画。接下来,我们将使用一个新的工具: GeometryEffect,用同样的协议对变换矩阵进行动画处理。如果你没有读过第一部分,也不知道Animatable协议是什么,你应该先读一下。或者如果你只是对GeometryEffect感兴趣,不关心动画,你可以跳过第一部分,继续阅读本文。
Swift社区
2022/04/04
1.4K0
高级 SwiftUI 动画 — Part 2:GeometryEffect
高级 SwiftUI 动画 — Part 3:AnimatableModifier
之前的两篇文章animating paths 和 transform matrices 对 Animatable 协议使用做了介绍,今天这篇文章将为大家介绍 AnimatableModifier,使用它可以完成更多的动画工作。
Swift社区
2022/04/04
1.4K0
高级 SwiftUI 动画 — Part 3:AnimatableModifier
SwiftUI 动画进阶 — Part 5:Canvas
这个高级SwiftUI动画系列的第五部分将探索Canvas视图。从技术上讲,它不是一个动画视图,但当它与第四部分的 TimelineView 结合时,它带来了很多有趣的可能性,正如这个数字雨的例子所示。
Swift社区
2022/04/04
2.8K0
SwiftUI 动画进阶 — Part 5:Canvas
如何在 SwiftUI 中显示二维码
Swift社区是由 Swift 爱好者共同维护的公益组织,我们在国内以微信公众号的运营为主,我们会分享以 Swift实战、SwiftUl、Swift基础为核心的技术内容,也整理收集优秀的学习资料。
Swift社区
2022/04/04
1.9K0
高级 SwiftUI 动画 — Part 1:Paths
在本文中,我们将深入探讨一些创建 SwiftUI 动画的高级技术。我将广泛讨论 Animatable[1] 协议,它可靠的伙伴 animatableData[2],强大但经常被忽略的 GeometryEffect[3] 以及完全被忽视但全能的 AnimatableModifier[4] 协议。
Swift社区
2022/04/04
3.9K0
高级 SwiftUI 动画 — Part 1:Paths
SwiftUI案例:自定义加载动画
案例通过在间隔时间内不断控制变量 animateBall:Bool 与 animateRotation:Bool 的值来间接地实现动画效果;
DioxideCN
2022/08/05
2.1K0
SwiftUI案例:自定义加载动画
SwiftUI 动画进阶 — Part4:TimelineView
前三篇高级 SwiftUI 动画系列是作者在 WWDC 2021 之前实战总结的内容。对 2021 年 WWDC 介绍的 TimelineView 和 Canvas 感到激动。这开启了一个全新的可能性,笔者将试图在这一部分和下一部分的系列中阐释这些可能性。
Swift社区
2022/04/04
3.8K0
SwiftUI 动画进阶 — Part4:TimelineView
SwiftUI:视图的显示和隐藏动画
SwiftUI最强大的功能之一是能够自定义视图的显示和隐藏方式。以前,您已经了解了如何使用常规if条件有条件地包含视图,这意味着当条件更改时,我们可以从视图层次结构中插入或移除视图。
韦弦zhy
2020/04/16
4.7K0
如何在 Photoshop 中制作 GIF 动画
您可能已经使用过一些在线 gif 生成器来快速生成 gif 图像,但这些在线生成器无法提供与 Photoshop 相同的灵活性和结果。
西门吹雪1997
2023/10/10
5560
如何在AI Studio数据可视化图像中显示汉字
AI Studio是一个非常好用的数据科学在线实验平台,不论是教学、学习还是开发,都可以使用。但是,下面的缺憾未免成为了珍珠上的一点瑕疵。
老齐
2020/05/15
3.4K0
如何在AI Studio数据可视化图像中显示汉字
掌握 Transaction,实现 SwiftUI 动画的精准控制
SwiftUI 因其简便的动画 API 与极低的动画设计门槛而广受欢迎。但是,随着应用程序复杂性的增加,开发者逐渐发现,尽管动画设计十分简单,但要实现精确细致的动画控制并非易事。同时,在 SwiftUI 的动画系统中,有关 Transaction 的解释很少,无论是官方资料还是第三方文章,都没有对其运作机制进行系统的阐述。
东坡肘子
2023/07/08
5630
掌握 Transaction,实现 SwiftUI 动画的精准控制
Ask Apple 2022 与 SwiftUI 有关的问答(上)
Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 SwiftUI 有关的一些问答进行了整理,并添加了一点个人见解。本文为上篇。
东坡肘子
2022/12/16
12.5K0
Ask Apple 2022 与 SwiftUI 有关的问答(上)
Ask Apple 2022 与 SwiftUI 有关的问答(下)
Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 SwiftUI 有关的一些问答进行了整理,并添加了一点个人见解。本文为下篇。
东坡肘子
2022/12/16
15K0
Ask Apple 2022 与 SwiftUI 有关的问答(下)
SwiftUI 中的Stack
就从Stack说起,stack查看文档我们看到HVZ三种stack,那么分别是怎么用的呢?
大话swift
2019/07/03
2.3K0
SwiftUI 中的Stack
Angular核心概念:过滤器
Filter:过滤器,用于View中呈现数据时显示为另一种格式,过滤器的本质是一个函数接收原始数据转换为新的格式进行输出:function(oldVal){处理…return newVal} 使用过滤器:{{e.salary | 过滤器名}} Angular2.x中,过滤器更名为“管道(Pipe)”
用户9857551
2022/06/28
1.2K0
Angular核心概念:过滤器
点击加载更多

相似问题

SwiftUI不能动画化图像转换

11

如何让核心图像过滤器(如CILinearGradient )工作?

10

如何在SwiftUI中制作图像动画,以播放帧动画

5165

如何在SwiftUI中动画化视图之间的转换?

10

核心数据图像转换swiftUI

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档