SwiftUI实现酷炫的溶解(Dissolve)动画

2021-01-16 21:15:23 110 收藏
分类专栏： Apple开发疑难秒懂百科 文章标签： SwiftUI 溶解 Dissolve 动画 Mask
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mydo/article/details/112721432
版权

在这里插入图片描述



功能需求

想在SwiftUI中实现酷酷的溶解(Dissolve)动画,有多难呢？

在这里插入图片描述在这里插入图片描述

如上图所示，我们没有借助UIKit以及其它第三方库，仅仅在SwitUI框架内就实现了在任何View上的溶解动画。

想知道它是如何实现的吗？

比你想象的要简单得多！ Let‘s Go！ 😃


功能分析

1. 缘起一篇博文

前不久，逛到一个国外老哥的博客，其中有一篇博文引起了我的兴趣:

SwiftUI: Dissolve Effect

里面中心思想只有一个：就是在SwiftUI中实现溶解动画。

可惜的是，虽然这位仁兄开头写的很无敌，可后面却很无极。<

大熊猫侯佩 CSDN认证博客专家 Swift Objective-C Xcode
非自由程序员,CSDN博客认证专家。
CSDN汇编板块版主, CSDN其他开发语言大版版主。

对App、以及Cocos2D、SpriteKit游戏开饶有兴趣。目前常用的语言是ObjC、Swift、Ruby等。不过看到编程艺术、ASM、逆向和C时依然欲罢不能。虽然不是，但喜欢黑客的思维和哲学，认为社会工程学很酷，但还没有实际用来撩过妹。
了解本专栏 订阅博主 解锁全文
已标记关键词 清除标记
unity3d 游戏插件 溶解特效插件 - Dissolve Shader
01-25
unity3d 游戏插件 溶解特效插件 - Dissolve Shader
表情包
插入表情
还能输入1000个字符
相关推荐
UnityShader实例08:溶解消融（Dissolve）材质
lupeng的博客
07-14 1万+
溶解消融（Dissolve）材质 在不少3D游戏中，角色死亡后会有一个溶解消融的特效，这个除了粒子特效以外还需要shader的配合。下面就是本例实现的一个效果，当然没有例子配合看起来是搓搓的，不过效果基本上已经出来了： shader实现原理 消融效果需要用到的CG函数Clip（），这个函数的定义是如果输入向量的任何一个元素小于0，则抛弃当前像素；所以要实现上图逐渐消融
SwiftUI用Gradient颜色裁剪任意视图
大熊猫猪侯佩 (︶^︶)
01-28 1004
在SwiftUI开发中对任意形状的视图，如果能打破单一的背景色，而去应用多彩阶梯色(Gradient)的话，那就太赞了。So，在SwiftUI中到底如何实现呢？答案远比你想象的要简单，Let’s Go！
SwiftUI如何在动画完成时得到通知
大熊猫猪侯佩 (︶^︶)
12-14 7639
在App开发中，少不了动画的点缀。有时候我们希望在动画完成时得到通知，这在UIKit编程中是家常便饭的事，但在SwiftUI中又该怎么做呢？ 本博向大家演示了如何在单一、复合以及重复动画的完成时如何得到通知，相信看完之后一定收获满满。
【Shader特效】—— UI 溶解
xdedzl的博客
04-19 440
前两天在shadertoy上看到了一个图片溶解的效果，移植到unity中并做了一些改动。 1.效果 2.shader Shader "Custom/UI/Dissolve" { Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("MainTex", 2D) = "white" ...
Unity Shader-死亡溶解效果
puppet_master的专栏
05-22 3万+
简介 赶脚每个学习shader的，都得过死亡溶解这一关....毕竟这个效果灰常常用。今天，我也来研究一下死亡溶解效果的实现。 溶解效果实现
vue
Whale
01-14 6814
vue-cli：vue的脚手架工具 npm install -g vue-cli vue init webpack sell (vue build选简化版，vuejs的大小可以减小6kb，依赖.vue文件开发) cd sell npm install npm run dev 如有需要 npm install less less-loader –save-dev 》》》》
Java 语法
suxue1994的博客
09-10 4397
Java关键字 Java标识符 Java注释 Java常量 Java进制转换 Java变量 Java数据类型 Java数据类型转换
photoshop
WDhani82475的博客
10-13 2160
` photoshop（1） 简介： Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。 图片格式及大小： jpeg–34.3kb gif—–85.1kb bmp—271kb psd—405kb 抠图方法： 1.套索 边缘比较清晰，且...
一种基于边缘Bloom的溶解shader的实现
现在学习也不晚
07-25 470
此文章为转载： 作者：胡说ba道 原文：https://blog.csdn.net/qq_37925032/article/details/80146256 溶解效果在游戏中十分常见，然而普通的溶解效果往往并不好看，本文将实现一种基于边缘bloom的溶解效果的实现 先上最终效果图 整体思路：将溶解的边缘提取出来，bloom之后再与原图像混合。 首先我们实现一下最基础的溶解，下面给出关键代码： ...
【c语言】设圆半径r = 1.5，圆柱高h = 3，求圆周长，圆面积，圆球表面积，圆球体积，圆柱体积
zhaoyaqian552的专栏
04-23 7万+
// 设圆半径r = 1.5，圆柱高h = 3，求圆周长，圆面积，圆球表面积，圆球体积，圆柱体积 // 要求：用scanf输入数据，取小数点后两位 #include int main() { float r,h; float c,s,sq,vq,vz; float pai = 3.1415926; printf("请输入圆半径："); scanf("%f",&r); printf
iOS自定义转场动画实战讲解
zry754331875的博客
02-16 305
转场动画这事，说简单也简单，可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现、隐藏视图。如果用到了navigationController，还可以调用pushViewController:animated:和popViewController
溶解(Dissolve)效果
huangzhipeng的专栏
09-07 5485
顶点着色,  正常处理顶点 // ADS Point lighting Shader // Vertex Shader // Richard S. Wright Jr. // OpenGL SuperBible #version 130 // Incoming per vertex... position and normal in vec4 vVertex; in vec3 vNormal
【c语言】给出三角形的三边长，求三角形面积
zhaoyaqian552的专栏
04-23 7295
// 给出三角形的三边长，求三角形面积 // area = sqrt( s * ( s - a ) * ( s - b ) * ( s - c ) ) // s = ( a + b + c) / 2 #include #include int main() { int a,b,c; double s,area; printf("请输入三角形三个边长："); scanf("%d%d%
Cocos2d-x 溶解效果实现
auccy的博客
01-06 304
项目需要实现溶解效果，记录下基本实现： 实现原理：随着时间变化计算一个阙值（如sin(time)），当取样噪声图纹理的RGB中的某个值低于此阙值时，目标纹理的当前片段着色器调用discard函数，丢弃当前的片段并且终止着色器执行。 精灵显示的基本逻辑及片段着色器噪声图纹理的设置： auto noiseSp = Sprite::create("noise.jpg"); noi...
Toolbox中的dissolve工具以及与排序工具的组合使用
BuquTianya的专栏
12-09 1万+
1.说明 ArcGIS  的桌面版本中的toolbox到底有多么强大，用过之后的人大概都很清楚。每一个工具的使用方法在ArcGIS 自带的Help中都有对应的介绍（位置：Professional Library\Geoprocessing\Geoprocessing tool reference）。 大家可能会问既然自带的文档都有说明还写什么！虽然Help中写到了各个输入项是用来做什么的，但是
Shader实例:溶解效果(Dissolve)
weixin_30709929的博客
05-13 168
效果： 图左：一道金光闪过，瞬间灰飞烟灭 图右：燃烧效果，先过渡到黄色，然后渐渐过渡到黑色，最后消失殆尽。 这是游戏中常见的效果，各位可以想想自己玩过的游戏。 手头正在玩的，梦三国手游，死亡的时候就是溶解消失。 代码有注释： Shader "Custom/Dissolve" { Properties { _MainTex("main ...
Android 帧动画实现自定义loading加载框
AFinalDream
01-04 804
加载框，Android，帧动画
微信小程序源码-合集6.rar
09-04
微信小程序源码，包含：图片展示、外卖点餐、小工具类、小游戏类、演绎博览、新闻资讯、医疗保健、艺术生活等源码。
python 京东预约抢购茅台脚本插件 一键运行
02-26
python 京东预约抢购茅台脚本插件 一键运行，按照readme介绍的步骤即可。 已经测试可以抢购得到。 注意：本资源仅用于用来学习，严禁用于任何商业目的，下载之后应当在24小时之内删除。
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值