第4章第14节：如何利用裁剪图形制作常见的聚焦动画 [SwiftUI快速入门到实战]

于 2021-09-07 20:37:52 发布
阅读量169 收藏
点赞数
分类专栏： SwiftUI快速入门到实战 文章标签： swift swiftui swiftui教程 ios开发
本文为互动教程网原创文章，欢迎转载但请注明来源。
本文链接：https://blog.csdn.net/fzhlee/article/details/120166710
版权
本教程详细介绍了如何使用SwiftUI创建聚焦动画。通过添加布尔属性控制动画状态，结合VStack和ImageView，利用圆形图形裁剪图片，并依据属性值调整裁剪图形的inset和偏移，实现焦点区域的平滑切换。同时，通过添加动画效果和按钮交互，使得动画在点击后可以启动和反转，达到聚焦和分散注意力的效果。
摘要由CSDN通过智能技术生成

  1. 本节课演示如何利用裁剪图形的滑动，制作常见的聚焦动画。
    SwiftUI快速入门到实战

  2. 首先添加一个布尔类型的属性，标识是否开始播放动画。
    SwiftUI快速入门到实战

  3. 添加一个VStack视图，作为子视图的容器。并通过图像视图，读取项目里的指定名称的图片。
    SwiftUI快速入门到实战

  4. 接着使用圆形图形，对图像视图进行裁剪。
    SwiftUI快速入门到实战

  5. 根据布尔属性的值，设置圆形拥有不同尺寸的inset。也就是说当开始动画时，圆形的尺寸将缩小120点。

了解本专栏 订阅专栏 解锁全文 超级会员免费看
李发展
关注
专栏目录
订阅专栏
SwiftUI 精品项目之照片编辑器图像裁剪工具（教程含源码）
code2day的博客
01-17 696
照片编辑器图像裁剪工具，具有下列功能。
第4章第15节：如何利用裁剪图形制作探照灯滚动扫描效果 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-07 152
本节课将继续使用裁剪图形，制作探照灯滚动扫描的艺术效果。 首先添加一个布尔类型的属性，标识是否开始播放动画。 添加一个ZStack视图，作为子视图的容器。并通过图像视图，读取项目里的指定名称的图片。 给图像视图应用模糊效果，模糊半径为6，同时提高图像视图的亮度。 接着在图像视图的上方，再添加一个相同的图像视图。 然后对第二个图像视图应用指定裁剪图形的遮罩效果，这里使用矩形作为裁剪图形。 设置矩形的宽度和图像视图的宽度相同，矩形的高度为100。同时根据布尔属性的值，设置..
IOS学习笔记39——拍照、从相册选图并对图片进行裁剪
热门推荐
Ryan's zone
01-05 3万+
2013第一篇，大家新年快乐！感谢一直关注我博客的同学们，有你们的支持我才有动力越做越好！有阵子没写博客了，因为前阵子着实比较忙，没时间整理，今天主要实现一个小Demo，我们知道在Instagram或Path上，头像都是正方形的，得到这种头像图片肯定要对原图进行截取，今天抽时间整理了下，先记录如下！早前写过一篇《IOS学习笔记22—文件操作（NSFileManager）结合相册小例子》，随着iOS
Swift 自定义 UIImagePickerController 选取图片后的裁剪器（相机裁剪界面）
Gabriel的专栏
01-07 2745
今天做项目的时候需要自定义裁切来自相机图库选择的图片，找了一圈资料发现相关的信息甚少。爬了好几个小时的坑，分享给大家～ 开始之前忍不住吐槽一手苹果，既然系统提供了选取图片后的裁切功能，让开发者传个CGRect，CGSize进去不应该理所当然吗？搞得我一开始疯狂的查水果的 API Reference，最后得出一个无奈的结论。。。宽高定死，你爱用不用：）。。。难道苹果认为用户对图片的需求大小只有那么一种吗？。。。 其实自定义裁剪器主要就是核心绘图 1.画个遮罩出来 IMG_0369.PNG .
UIImagePickerController关于图片裁剪
weixin_30337157的博客
08-20 808
- (UIImage*)scaleImage:(UIImage*)anImage withEditingInfo:(NSDictionary*)editInfo{ UIImage *newImage; UIImage *originalImage = [editInfo valueForKey:@"UIImagePickerControllerOriginalIm...
iOS开发 使用UIImagePicker从相机或相册获取图片并裁剪
jijiji000111的专栏
10-15 1万+
今天遇到一个用户头像上传的问题，需要从相册或者相机中读取图片。代码很简单，抽取关键部分，如下： [cpp] view plain copy //load user image   - (void)UesrImageClicked   {       UIActionSheet *sheet;              // 判断是否支持相机
第3章第4节：使用ZStack在深度方向排列视图 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-04 379
本节课演示ZStack布局视图的使用，ZStack视图可以使其子视图，在垂直屏幕的方向上排列。 将文本视图嵌入到ZStack布局视图中。 然后将文本视图修改为图像视图，以加载项目里的一张图片。 接着使用圆形图形，对图像视图进行裁剪。 在ZStack布局视图里，添加一个文本视图。此时文本视图位于图像视图的中心位置。 设置文本视图的字体尺寸为48，字体颜色为白色。 继续添加另一个文本视图。 设置文本视图的字体尺寸，字体颜色为白色。 通过调用偏移方法，将文字向下..
第1章第18节：如何给图像视图添加遮罩以突出主题 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-01 389
本节课演示如何给图像添加遮罩，使用遮罩可以突出显示图片的主题内容，我们在第四章还将利用遮罩制作非常漂亮的动画。 首先添加一个图像视图，显示项目中的一张图片素材。 然后通过调用裁剪图形方法，给图像应用遮罩效果，遮罩图形为圆形，此时从右侧的预览窗口可以看出，图片已经被裁剪成圆形效果。 接着添加一个新的图像视图，您将使用另一个遮罩方式。 通过调用遮罩方法，给图像应用遮罩效果，遮罩图形为圆形，从预览窗口可以看出，两种方式都产生了相同的遮罩效果。点击此处的文件名称，打开文件列表。 点..
SwiftUI用Gradient颜色裁剪任意视图
享受开发，颠倒银河
01-28 1342
在SwiftUI开发中对任意形状的视图，如果能打破单一的背景色，而去应用多彩阶梯色(Gradient)的话，那就太赞了。So，在SwiftUI中到底如何实现呢？答案远比你想象的要简单，Let’s Go！
Swift使用UIImagePickerController 从相册选择图片、从相机选择图片
kicinio的博客
06-26 3541
配置： 如果是相机使用，需要在info.plist文件增加使用前应用程序说明；相机使用也是如此。（第二个是CALENDARS权限，打错了；图片是Photo Library Usage Description） 从相册选择图片： 使用UIImagePickerController进行图片选择需要实现UIImagePickerControllerDelegate, UINavigationControllerDelegate这两个代理。因为图片选择视图控制器属于系统内定义的NavigationControll
SwiftUI 从手机相册选择照片 UIImagePickerController
github_29300109的博客
04-08 426
import SwiftUI import PhotosUI struct ImagePickerView: UIViewControllerRepresentable { @Binding var image: UIImage //处理后的图片 @Binding var showPicker: Bool @Binding var originImage: UIImage //选中的原图 @Binding var selectType: FaceMosaicT
SwiftUI从手机相册选择照片Picker 【UIImagePickerController的包装】
10-19 1086
直接上代码： import UIKit import SwiftUI struct ImagePicker: UIViewControllerRepresentable { @Environment(\.presentationMode) private var presentationMode let sourceType: UIImagePickerController.SourceType let onImagePicked: (UIImage) -&gt.
iphone 怎么使用图片选取器 UIImagePickerController
05-01 618
1。 定义 类变量：        UIImagePickerController* picker_library_;     2。实现 UIImagePickerControllerDelegate   这个delegate     3。 以模态的方式，显示 图片选取器        [cpp] view plaincopy
SwiftUI iOS 基础组件之照片相册选择器（教程含源码）
iCloudEnd的博客
03-27 628
实战需求 SwiftUI iOS照片相册选择器（教程含源码） 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 从相册获取图片 @State var image: UIImage? ImagePickerView(sourceType: .photoLibrary) { image in self.image = image } 弹出视图sheet组件 .sheet(isPresented: $showImagePicker) {}
SwiftUI实战之Picker带Image和图标效果(教程和源码)
iCloudEnd的博客
04-18 416
本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 Picker基础使用 Picker显示图片 代码 1、制作行视图 fileprivate struct Row : View { var name: String var body: some View { return HStack { Imag...
SwiftUI如何从手机相册选择照片Picker
iCloudEnd的博客
04-30 947
本文价值与收获 看完本文后，您将能够作出下面的界面 Jietu20200429-202917@2x.jpg Jietu20200429-202941.gif 看完本文您将掌握的技能 掌握从相机选择照片的方式 掌握sheet弹出方式 解决方案 目前SwiftUI原生还不支持从相机里面选择照片，我们可以使用UIViewControllerRepresentable来封装UI...
swift 从手机选照片_SwiftUI 从手机相册选择照片 UIImagePickerController
weixin_36242060的博客
01-12 329
```swiftimport SwiftUIimport PhotosUIstruct ImagePickerView: UIViewControllerRepresentable {@Binding var image: UIImage //处理后的图片@Binding var showPicker: Bool@Binding var originImage: UIImage //选中的原图@B...
UIImagePickerController（图像选取器）使用方法
吃橘子
02-01 5136
文章目录遵守协议在使用前应判断是否可用照片采集采集之后参考博客 遵守协议 @interface ViewController : UIViewController < UIImagePickerControllerDelegate, UINavigationControllerDelegate > @property (strong,nonatomic) UIImagePicker...
AutoCAD建筑制图：第四章二维图形编辑与命令详解
本资源是一份关于AutoCAD建筑制图的第四章PPT课件，主要讲解了二维图形编辑的相关内容。章节详细探讨了四种关键编辑操作： 1. 基本编辑命令： - 包括移动、复制、旋转、偏移、修剪、缩放、延伸、拉伸、拉长和镜像...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李发展

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值