首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

打造开源第一 iOS 图片浏览器 (支持视频)闲谈

通常情况下,状态栏的方向可以确定当前控制器的布局方向,所以通过监听状态栏的方向更新子视图的布局。...一个好的动效应该尽量减少不必要的额外视图和逻辑,所以笔者通过对 cell.contentView 的操作来实现拖动动效,并且 GIF 的播放 runloopMode 为 NSRunLoopCommonModes...手势交互移动缩放的算法实现 实际上在上个版本的代码中,YBImageBrowser 使用了一个稍显复杂的算法来实现图片移动的同时缩放,后来笔者实践了一种更为简洁的方法,优雅了许多: CGRect startFrame...point 作为动画视图的锚点,然后更新动画只需要通过触摸点更新 center、借助 CGAffineTransform 实现缩放就行了,交互移动缩放的效果算是比较完美了。...,Item 的中心点偏移越多。

1.6K40

75.HarmonyOS NEXT ImageItemView组件深度剖析:手势交互与动画实现(二)

{ count: 2 }), // 双击 TapGesture({ count: 1 }), // 单击 PinchGesture({ fingers: 2 }), // 双指捏合 PanGesture...(>1放大,PanGesture({ fingers...(用于图片切换)坐标计算:offsetX/Y:手势相对于起点的位移量需要叠加上次的偏移量实现连续移动五、动画系统应用runWithAnimation(() => { // 状态变更操作 this.imageScaleInfo.scaleValue...= 目标值; this.matrix = 新矩阵;});动画原理:包裹在runWithAnimation中的状态变更会自动应用动画系统默认使用弹性动画(spring)效果自定义动画:runWithAnimation...translate({ x: 100, y: 50 }) // 位移变换 .copy(); // 创建新实例矩阵操作顺序:先缩放后位移(矩阵乘法顺序,实际是反向应用)建议先执行缩放再执行位移坐标系特点:以组件中心点为变换原点位移量基于缩放后的坐标系

10700
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Masonry源码解析 原

    Masonry源码解析     Masonry的核心依然是使用原生的NSLayoutConstraint类来进行添加约束,通过统一的封装和链式函数式编程的方式让开发者添加约束布局更加方便。...一、核心的View+MASAdditions类别     这个类别是Masonry中用来添加,更新和重置约束的核心类别。其中提供了我们最常用的布局函数。...首先从类别命名上也可以看出,此类别扩展的类是通过宏来设置的: @interface MAS_VIEW (MASAdditions) MAS_VIEW宏做到了平台屏蔽的作用,在iOS上,其为UIView,...^)(MASConstraintMaker *make))block; 这3个函数的具体实现基本一致,其核心流程都是:关闭视图Autoresizing特性->创建约束生成器->配置约束生成器->回调开发者约束设置...这3个函数不同的地方只在配置约束生成器部分,配置了updateExisting参数为YES,表示要进行已有约束的更新,配置了removeExisting为YES表示要重新创建约束。

    95640

    iOS动画三板斧(三)--UIDynamic动画介绍实战

    创建时,需要附带动画将要作用的视图(即UIDynamicItem),可以传一个包含多个视图的数组。 UIDynamicItem 就是仿真动画将要作用的视图。...UIPushBehavior 推动行为 UIDynamicItemBehavior 动力行为 UISnapBehavior 捕获行为 以上每种行为都可以单独使用,也可以组合使用来实现复杂的动画效果。...添加碰撞行为后.gif 3.UIAttachmentBehavior (附着行为) 附着行为一般都是添加手势,让视图跟着手势移动,因为一般都是与手势搭配使用。...动力行为.gif 6.UISnapBehavior (捕获行为) 捕获行为,是移动视图到某个位置,然后到达后,有一个摆动效果。...示例动画.gif 多种仿真效果组合,可以组合出酷炫的动画效果。大家可以多尝试组合以及参数变化来做酷炫的动画,Have fun!

    1.3K40

    72.HarmonyOS NEXT PicturePreviewImage组件深度剖析:手势交互与动画系统深度解析 (二)

    温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!...this.matrix = matrix4.scale({ x: this.scale, y: this.scale }) }) 缩放中心计算: 双指中点坐标计算...交叉轴锁定机制 setCrossAxis(event) { if (this.imageListOffset > this.moveMaxOffset) { // 锁定交叉轴移动...this.isMoveCrossAxis = false // 显示相邻图片提示 this.showNeighborPreview() } } 视觉反馈设计: 当滑动超过阈值时显示相邻图片的20%...预览 使用半透明遮罩提示可切换方向 五、性能优化策略 5.1 矩阵计算优化 updateMatrix() { // 使用矩阵合成代替逐项计算 this.matrix = matrix4.

    4300

    184.HarmonyOS NEXT系列教程之列表交换组件交互实现详解

    数据源 appInfoList: this.appInfoList, // 控制器 listExchangeCtrl: this.listExchangeCtrl, // 自定义视图...() .onActionUpdate((event) => { // 处理拖拽移动 this.handleDrag(event....onActionStart((event) => { // 处理开始拖动 }) .onActionUpdate((event) => { // 处理拖动更新...最佳实践7.1 交互建议提供清晰的视觉反馈实现平滑的动画效果处理边界情况优化用户体验7.2 性能建议使用事件节流优化动画性能减少不必要的更新实现延迟处理8....小结本篇教程详细介绍了:列表项交互的设计方案拖拽排序的实现方法滑动删除的处理机制动画效果的实现性能优化的策略这些内容帮助你理解ListExchangeViewComponent的交互实现。

    8300

    iOS好用的第三方侧边栏控件——MMDrawerController

    二、MMDrawerController的使用及相关设置         MMDrawerController的使用十分简单,只需将中心视图控制器和左边栏视图控制器传入初始化方法即可完成MMDrawerController..., assign, readonly) CGFloat visibleRightDrawerWidth; //动画速度,这个参数的意义是每秒移动多少单位 默认为800/s @property (nonatomic...MMOpenDrawerGestureModePanningCenterView = 1 << 2, //在中心视图控制器的视图边缘20个单位内拖动时可以打开侧边栏...        开发者如果有特殊的需求,也可以通过继承MMDrawerController来实现自己的侧边栏控制器类,MMDrawerController框架中提供了一个扩展,在编写MMDrawerController...3.无法设置显示一个最小的抽屉宽度。 4.不能支持UITabBarController容器。 5.不能在中心视图控制器之上呈现侧边栏视图。 专注技术,热爱生活,交流技术,也做朋友。 ——珲少

    2.9K20

    72.HarmonyOS NEXT PicturePreviewImage组件深度剖析:手势交互与动画系统深度解析 (二)

    温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!...this.matrix = matrix4.scale({ x: this.scale, y: this.scale })})缩放中心计算:双指中点坐标计算:centerX...4.2 交叉轴锁定机制setCrossAxis(event) { if (this.imageListOffset > this.moveMaxOffset) { // 锁定交叉轴移动...this.isMoveCrossAxis = false // 显示相邻图片提示 this.showNeighborPreview() }}视觉反馈设计:当滑动超过阈值时显示相邻图片的20%...预览使用半透明遮罩提示可切换方向五、性能优化策略5.1 矩阵计算优化updateMatrix() { // 使用矩阵合成代替逐项计算 this.matrix = matrix4.identity

    6500

    macOS 开发基础教程视频 - 理解bounds本质

    在macOS 开发基础教程视频课程的NSView章节中,解释了关于视图的frame和bounds的坐标参照系统,限于授课经验与课程时间,感觉对NSView的bounds属性,表述的不够深入,希望通过本文帮助观看课程的同学加深对...bounds的理解,并通过实例运用,体会在NSView中bounds的真正价值。...如果bounds比较小(就像你在遮盖上开了一个小小的窗口),可以通过移动bounds位置,来展示NSView的各个区域内容。...下面我们通过一个示例来加深对bounds的理解和使用 创建一个Mac application 项目工程,从控件库中拖动一个customView到ViewController中,并搭建UI界面大致如下:...,修改视图的bounds属性,即可实现scroll效果 func handlePanGesture(_ panGesture : NSPanGestureRecognizer){

    1.1K40

    75.HarmonyOS NEXT ImageItemView组件深度剖析:手势交互与动画实现(二)

    count: 2 }), // 双击 TapGesture({ count: 1 }), // 单击 PinchGesture({ fingers: 2 }), // 双指捏合 PanGesture...(>1放大,<1缩小) lastValue:记录上次缩放值,保证连续性 边界处理技巧: 允许超出最大/最小值一定比例(提升操作手感) 手势结束后执行弹性动画 四、滑动位移实现 PanGesture...(用于图片切换) 坐标计算: offsetX/Y:手势相对于起点的位移量 需要叠加上次的偏移量实现连续移动 五、动画系统应用 runWithAnimation(() => { // 状态变更操作...系统默认使用弹性动画(spring)效果 自定义动画: runWithAnimation(() => { // 操作 }, { duration: 300, // 动画时长 curve:...y: 50 }) // 位移变换 .copy(); // 创建新实例 矩阵操作顺序: 先缩放后位移(矩阵乘法顺序,实际是反向应用) 建议先执行缩放再执行位移 坐标系特点: 以组件中心点为变换原点

    5700

    HarmonyOS 开发实践 —— 基于手势的图片预览与缩放

    场景一:对图片进行放大、缩小、拖拽移动,且放大过程中也可同时进行拖拽操作方案1、使用组合手势GestureGroup,同时绑定捏合手势PinchGesture和滑动手势PanGesture,设置组合手势识别模式为并行识别模式...2、在对图片进行双指捏合时,优先触发绑定的PinchGesture手势,对图片进行缩放操作;当滑动拖拽图片时,识别绑定的PanGesture手势,对图片进行拖拽移动。...// 当捏合手势触发时,可以通过回调函数获取缩放比例,从而修改组件的缩放比例onPinchGestureActionUpdate(event: GestureEvent) {  const SCALE_VALUE...1、在panGesture手势的onActionUpdate回调中获取偏移位置,计算图片放大后分别往左或者往右拖动时是否到达边界,记录向左或向右边界的状态。...核心代码1、在PanGesture手势的onActionUpDate回调中获取偏移位置,计算拖拽过程中左右两边分别是否已到边界。

    21910

    CVPR 2024 | DNGaussian: 全局局部深度归一化优化的稀疏三维高斯辐射场

    实验还证明了文章的方法在拟合复杂场景、广泛视角和多种材质方面的通用能力。 文章的贡献可以归纳为以下三点: ①提出了一种硬性和软性深度正则化方法,通过鼓励高斯的移动来约束3D高斯辐射场的几何结构。...方法 图1 3D高斯的先验知识 3D高斯使用一组3D高斯表示3D信息。它使用一组3D高斯基元、视图姿态和涉及中心的相机参数,计算像素级颜色。...3D高斯使用基于点的渲染方法,通过混合重叠像素的个有序高斯来计算像素的颜色: 其中是由颜色特征计算得到的与NeRF的光线采样策略不同,所涉及的N个高斯是根据、相机参数和视图姿态,以及一组预定义的规则,由经过良好优化的光栅化器收集的...然后,我们渲染一个"硬深度",它主要由从相机中心穿过像素的射线上最近的高斯组成: 由于现在只有中心处于优化状态,位置错误的高斯无法通过降低它们的不透明度或改变形状来避免被正则化,因此它们的中心会移动。...从这个角度来看,文章额外冻结了高斯中心(表示为)以避免中心移动造成的负面影响,并提出了软深度正则化来调整不透明度: 通过同时使用硬深度正则化和软深度正则化,文章约束最近的高斯保持在合适的位置并具有较高的不透明度

    1.2K10

    UITableViewCell系列之(二)视觉差滚动效果前言

    如下是我所要说的视觉差滚动效果(即:滚动tableView时候,每一行的图片都会根据滚动方向和滚动距离的不同进行移动,给人一种图片在移动的视觉体验),由于下面gif图失真卡顿严重,真实效果大家可以参考demo...给cell的contentView添加一个UIImageView子控件 给imageView添加上下左右约束 给cell添加一个对象方法。...用于tableView滚动时,更新imageView的Y坐标值 在UIScrollViewDelegate的scrollViewDidScroll:方法里调用cell的对象方法,更新imageView的...约束设置如下: ? Snip20160730_1.png 2....控制器不能使UITableViewController,只能是UIViewController的view上添加一个UITableView ---- 3. demo中涉及到了坐标系转换的问题,不了解坐标系转换的可以参考如下两个方法的使用

    6.1K30

    ConstraintLayout 之 Guideline、Barrier、Chains和Groups

    :1.1.0-beta1' Guidelines 可以简化视图布局的对齐方式,特别是如果您在许多元素上重复使用了相同的边界值。...Barrier可以是垂直或水平的,并且可以创建到引用视图的顶部、底部、左侧或右侧。 以下示例可以看出,当调整TextView的大小时,Barrier调整其大小和受限视图移动。 ?...constraint_layout_chain_modes.png 创建链时与其他略有不同,因为所有视图都具有对它们定义的约束,并且链中的第一个项指定了chainSyle。...这样一来,您可以设置组中控件的可见性仅通过设置组的可见性就行了,而无需设置每个视图的可见性。这对于诸如错误屏幕或加载屏幕的事情是有用的,其中一些元素需要一次更改其可见性。 添加组-如下: ?...循环定位允许你以一定角度和距离限制相对于另一个控件中心的控件中心。这样你可以在一个圆上定位一个控件。 ? ? 示例代码 <?

    1.5K50

    图形编辑器基于Paper.js教程13:基于 Paper.js 的自动重置圆形运动程序,按钮控制运动,按键控制运动,websocket控制运动

    支持的特性 支持按钮来控制运动 支持使用按键来控制运动 支持使用websocket来控制运动 初始化与环境设置 首先,页面加载了 Paper.js 的库,并为画布设定了尺寸和边框样式。...,这是通过更新 direction 变量实现的。...这为远程控制提供了可能,使得应用可以响应外部事件来控制圆形的移动。...这增加了动画的视觉效果,使得圆形在移动的同时也在轴向旋转。 圆形位置的更新 接下来的逻辑判断当前是否有有效的移动方向(即检查 direction 是否为非零向量)。如果有,就更新圆形的位置。...(即 deltaX 或 deltaY 非零),代码将更新视图中心点,确保用户总能看到动画中的主要对象: if (deltaX !

    16510

    AutoCAD 2023 for Mac(cad2023)

    CAD 图形 2、AutoCAD 灵活访问在移动设备上创建、编辑和查看 CAD 图形 3、命令窗口使用简单的按键直接在命令行中启动命令和响应提示 4、对象夹点使用夹点编辑轻松地重新塑造、移动或操纵几何图形...轻松格式化引线并定义样式 4、中心线和圆心标记创建和编辑移动关联的对象时自动移动的中心线和中心标记 5、表格创建数据和符号分别在行和列中的表格、应用公式,并链接到 Microsoft Excel 电子表格...6、修订云为图形中的最新更改绘制修订云,从而快速识别更新内容 7、视图按名称保存视图,轻松返回到特定视图以便快速参考或应用到布局视口 8、布局指定图纸大小、添加标题栏、显示模型的多个视图 9、字段使用文本对象中的字段来显示字段值更改时可自动更新的文本...、回旋、漫游和围绕三维模型飞行来展示您的设计 3、视觉样式应用视觉样式,控制边的显示、照明和三维模型的着色 4、截面平面使用实体、曲面、网格或区域创建截面平面以显示横截面视图 5、渲染应用照明和材质,为三维模型提供真实外观...,包括基本视图、投影视图、截面视图和局部视图 图片 四、协作 1、PDF 文件通过导入、导出或附加为参考底图,来共享和重复使用 PDF 文件中的数据 2、DGN 文件通过导入、导出或附加为参考底图,来共享和重复使用

    4.8K50

    提高效率 |ArcGIS Pro 中所有快捷键一网打尽

    按住 V 键同时单击并拖动,以围绕您单击的枢轴点旋转。 V + 方向键 围绕视图中心旋转。 按 V 并按上箭头键、下箭头键、左箭头键或右箭头键来围绕视图中心旋转。...按住 V 键同时单击并拖动,以围绕您单击的枢轴点旋转。V + 方向键围绕视图中心旋转。按 V 并按上箭头键、下箭头键、左箭头键或右箭头键来围绕视图中心旋转。B + 拖动在 3D 场景中环视。...您可根据需要重复按方向键来进行平移微调,也可按住方向键同时沿某一方向移动指针。U沿向上远离视图的方向移动。在 2D 中,这类似于持续缩小。 在 3D 中,照相机会垂直抬起。J沿向下靠近视图的方向下移。...当照相机移动时,调整鼠标指向以设置您要行驶的方向。可以选择使用 W 和 S 键更改方向。 左箭头键和右箭头键 从视图中心向左或向右移动照相机。...如果要通过远程网络连接使用非常大的影像,建议您不要使用此功能,因为系统检索正确信息可能会造成严重延迟。

    1.5K20
    领券