SwiftUI 实现Draggesture效果
今天闲来无事,使用SwiftUI 实现拖动,并且返回的动态效果。代码不多。。。。。
效果如下:
代码如下:
- import SwiftUI
- import Combine
- class KBDragObjectBind: BindableObject {
- var didChange = PassthroughSubject<KBDragObjectBind,Never>()
- var mass:Double = 1.0 {
- didSet{
- massString = String(format: "%.2f", mass)
- self.didChange.send(self)
- }
- }
- var massString = "1.0" {
- didSet {
- self.didChange.send(self)
- }
- }
- var stiffness:Double = 100.0 {
- didSet{
- stiffnessString = String(format: "%.0f", stiffness)
- self.didChange.send(self)
- }
- }
- var stiffnessString = "100.0" {
- didSet {
- self.didChange.send(self)
- }
- }
- var damping:Double = 10.0 {
- didSet {
- dampingString = String(format: "%.0f", damping)
- self.didChange.send(self)
- }
- }
- var dampingString = "10.0"{
- didSet {
- self.didChange.send(self)
- }
- }
- var initialVelocity:Double = 0.0 {
- didSet {
- initialVelocityString = String(format: "%.0f", initialVelocity)
- self.didChange.send(self)
- }
- }
- var initialVelocityString = "0.0"{
- didSet{
- self.didChange.send(self)
- }
- }
- }
- struct KBDragGestureView : View {
- @State var offset :CGSize = CGSize(width: 0, height: 0)
- @ObjectBinding var dragObj = KBDragObjectBind()
- @State var offset2 :CGSize = CGSize(width: 0, height: 0)
- var body:some View {
- VStack {
- Text("Default Setting")
- Image(systemName: "hand.draw.fill")
- .resizable()
- .frame(width: 100, height: 100)
- .offset(offset)
- .gesture(
- DragGesture()
- .onEnded({ (value) in
- print("onEnd:\(value)")
- withAnimation(.spring()) {
- self.offset = CGSize(width: 0, height: 0)
- }
- })
- .onChanged({ (value) in
- print("onChanged: \(value)")
- self.offset = value.translation
- })
- ).zIndex(10)
- Divider()
- HStack(){
- Text("质量弥撒曲mass(\(self.dragObj.massString)):")//
- Slider(value: $dragObj.mass, from: 0.1, through: 1.0, by: 0.01)
- }
- HStack(){
- Text("刚度stiffness(\(self.dragObj.stiffnessString)):")
- Slider(value: $dragObj.stiffness, from: 0, through: 100.0, by: 1)
- }
- HStack(){
- Text("阻尼dampin(\(self.dragObj.dampingString)):")
- Slider(value: $dragObj.damping, from: 0, through: 100.0, by: 1)
- }
- HStack(){
- Text("初始速度initialVelocity(\(self.dragObj.initialVelocityString)):")
- Slider(value: $dragObj.initialVelocity, from: 0.0, through: 100.0, by: 1)
- }
- Image(systemName: "hand.draw")
- .resizable()
- .frame(width: 100, height: 100)
- .offset(offset2)
- .gesture(
- DragGesture()
- .onEnded({ (value) in
- print("onEnd:\(value)")
- withAnimation(.spring(mass: self.dragObj.mass,
- stiffness: self.dragObj.stiffness,
- damping: self.dragObj.damping,
- initialVelocity: self.dragObj.initialVelocity)) {
- self.offset2 = CGSize(width: 0, height: 0)
- }
- })
- .onChanged({ (value) in
- print("onChanged: \(value)")
- self.offset2 = value.translation
- })
- )
- }.padding()
- }
- }
- #if DEBUG
- struct KBDragGestureView_Previews : PreviewProvider {
- static var previews: some View {
- KBDragGestureView()
- }
- }
- #endif
SwiftUI 实现Draggesture效果的更多相关文章
- 关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...
- 解析SwiftUI布局细节(二)循环轮播+复杂布局
前言 上一篇我们总结的主要是VStack里面的东西,由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点,在这些东西说完后我准备解析一下苹果在SiwftUI文档 ...
- SwiftUI学习(一)
总览 如果你想要入门 SwiftUI 的使用,那 Apple 这次给出的官方教程绝对给力.这个教程提供了非常详尽的步骤和说明,网页的交互也是一流,是觉得值得看和动手学习的参考. 不过,SwiftUI ...
- SwiftUI学习(二)
教程 2 - Building Lists and Navigation Section 4 - Step 2: 静态 List var body: some View { List { Landma ...
- SwiftUI or Flutter ?
看到这篇好文,忍不住想分享一下 本文转自https://juejin.im/post/5d05b45bf265da1bcc193ff4 版权归原文所有 ------------------------ ...
- SwiftUI 实战:从 0 到 1 研发一个 App
心得感悟 起初看到 WWDC 上的演示 SwiftUI 时,我就觉得 SwiftUI 有种陌生的熟悉感(声明式语法),所以体验下,看看有没有什么启发. 先说下整体项目完成下来的感受: 用 Swift ...
- 基于 SwiftUI 创建一个可删除、可添加列表项的列表
执行环境 macOS Mojave: 10.14.5 xcode: Version 11.0 beta 6 (11M392q) 预览效果 完整代码 import SwiftUI class Item: ...
- SwiftUI - 一步一步教你使用UIViewRepresentable封装网络加载视图(UIActivityIndicatorView)
概述 网络加载视图,在一个联网的APP上可以讲得上是必须要的组件,在SwiftUI中它并没有提供如 UIKit 中的UIActivityIndicatorView直接提供给我们调用,但是我们可以通过 ...
- SwiftUI - 一起来仿写微信APP之一首页列表视图
简介 最近在学习 SwiftUI ,我一般都是先去学习界面布局,所以就想着仿写一下经常使用的软件的界面,所以先拿微信开刀.因为不想一次性发太多的内容,所以只好将主题分解,一部分一部分地去讲,接下来我们 ...
随机推荐
- 47 ubuntu指令整理学习
0 引言 在使用ubutnu时,积累了大量命令笔记.但是这些笔记比较零散,没有系统性,不便于查找和使用.通过系统性.分门别类地整理,希望可以增强对指令的记忆,提高工作效率,对ubuntu的使用更加地道 ...
- arcgis api for javascipt 输出图片
地图模板制作-发布-gpurl调用 window.open可以直接打开url链接. saveas可以另存,仅支持ie浏览器 <!DOCTYPE html><html><h ...
- AtCoder ABC 132F Small Products
题目链接:https://atcoder.jp/contests/abc132/tasks/abc132_f 题目大意 分析 代码如下
- 拾遗:Perl 正则表达式
三种正则模式: 匹配:m//,其中前缀 m 可省略 替换:s/// 转化:tr/// 操作符: =~:存在匹配项则返回结果 !~:不存在匹配项则返回结果 修饰符: i:忽略大小写,如:s/.../.. ...
- jquery操作html元素之(设置内容和属性)
设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...
- yolo3使用darknet卷积神经网络训练pascal voc
darknet本来最开始学的是https://github.com/pjreddie/darknet yolo3作者自己开发的,但是它很久不更新了而且mAP值不好观察,于是另外有个https://gi ...
- 2018-8-10-VisualStduio-打断点调试和不打断点调试有什么区别
title author date CreateTime categories VisualStduio 打断点调试和不打断点调试有什么区别 lindexi 2018-08-10 19:16:52 + ...
- excel 导数据
参考: ="insert tsilverinfo(ss_id,memo,ss_weight,ts_id,ss_type,ModelPosX,ss_stoneW,ss_stoneWU) val ...
- android 自定义shape 带阴影边框效果
在drawable 里面 建立一个 xml 直接复制 看效果 自己调试就可以 <?xml version="1.0" encoding="utf-8"?& ...
- windows2012 日志查看过程
Windows2012界面修改好造成有些人不知道在哪里查找windows 日志 我这边截图描述一下 1. 2.输入 命令 eventvwr.msc 3.弹出 windows 事件查看器 4.若需要 ...