文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS-视频播放器的简单封装

，则通过loadNibNamed加载xib的时候需要获取返回数组的firstObject，得到的才是xib的View，如果获取lastObject，得到是的tap手势，会报错tap手势对象没有View的方法...工具条的显示与隐藏 在播放状态时，当点击imageView，就会弹出底部工具条，可以查看当前播放的时间，视频总时间或进行暂停视频、全屏播放等操作。如果没有操作，工具栏会在5秒之后自动隐藏。...具体代码会在播放时间、Slider与视频播放的同步中详细贴出。 三. 播放时间、Slider与视频播放的同步 底部工具条中播放时间、视频总时间以及Slider的滑动需要与视频播放时间进行同步。...[self addShowTime]; [self.player play]; [self addProgressTimer]; } } Slider的拖动跳跃播放视频 根据Slider滑动拖动滑动位置播放视频需要监听...]; [self removeShowTime]; } - (IBAction)valueChangedSlider:(UISlider *)sender { // 计算slider拖动的点对应的播放时间

1.9K110
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    探索“流畅感”——谈手势动效体验设计

    Chapter 1 我们与流畅的距离 当你正准备和开发一通友好探讨的时候，这个时候开发向你发起了一系列灵魂拷问： “你这个左滑的手势，划多少才算触发？划多快才算触发？如果划了一半划回去算不算触发？...但是一旦脱离了操作系统，那手势的处理逻辑就会比较简陋，导致最终的体验不佳。 那这个时候也许你会想问，我们怎么会脱离操作系统呢？我们的手机不都是iOS和Android的吗？不都是操作系统吗？...手势识别误触：同一热区支持了多个手势，可是用户的实操时的手势动作又没那么标准，导致用户误触其他手势。 手势触发费力：滑动费劲，需要滑动很长距离才能触发预期的动作。...另外，文档移动端也定义了一系列更进阶的手势的操作，在这样对手势的进阶定义后，操作可以被更精准和智能的判断。...因为取景页面可以点击对焦和测光，因此轻微的滑动不应该导致整个取景页面或者底部Tab的滑动，应当是当整个页面检测到一个比较大的滑动动作之后，才自动移动切换。

    1.3K20

    学会一行CSS即可提升页面滚动性能

    确实不可以，但移动端则有另外一个特殊属性具有异曲同工之处，那就是 touch-action。...顾名思义，该属性是用于设置触摸屏如何操纵元素区域动作，同样的，touch-action 可以禁用浏览器在移动端处理手势的事件，进而提高页面滚动性能，同时它还能解决移动端 点击延迟问题（很多人可能只知道viewport...manipulation' // 或 auto});可能有的朋友就会问了，如果我们在 touchstart 或 touchmove 事件中用 event.preventDefault() 阻止系统默认事件，不就可以阻止手势操作吗...监听事件都是先进行了"触摸"才能执行回调，如果需要阻止默认事件，那么就必须在触摸开始前就检查是否需要阻止，滑动响应的优先级反而降低了，Google为了保证滑动流畅性就默认取消了这一机制。...如果觉得文章写的不错，可以点赞收藏，也欢迎关注，我会持续更新更多前端有用的知识与实用技巧，我是茶无味de一天，希望与你共同成长~

    3.2K30

    如何处理手势冲突 | 手势导航连载 (三)

    问题 2: 主要的 UI 需要在交互区域内/附近使用滑动操作吗？ 这个问题是在询问，应用的界面是否在手势导航交互区域内或附近包含任何需要用户滑动操作的组件。...绘图应用，用户可以在屏幕画布上绘图 (自然也是滑动操作)。 问题 3: 常用的视图/控件位于手势交互区域内/附近吗？ 这个问题应该简单一些。...注意，这个问题也包括那些占据屏幕较大区域，且包括了手势交互区域的视图/控件。比如 DrawerLayout 或尺寸较大的 ViewPager。 问题 4: 该视图/控件需要滑动拖动交互吗？...这是因为与整个视图的宽度相比，屏幕左右侧的手势交互区域宽度相对较小 (默认为每边 20dp)。...我们认为，开发者需要尽量确保用户使用一致的操作来与系统进行交互，如从边缘向内滑动进行返回。注意是在整个设备上，而不仅仅是在一个应用中保持一致性。

    5K30

    手势魅力-设置一个触摸菜单

    序言 本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件...(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...的方法封装点击,移动,抬起功能函数,尽管移动(手机)端与pc端有很多相似之处,但还是有很多要注意的地方的,如果你想获得该Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译...详情:我们是否正在用这个手势记住速度？你想在菜单后面加一个遮罩,当你打开它时会变得越来越暗吗? 在我的情况下，我只希望手势的方向是水平的，因为我希望滚动功能正常。我有限制，并且我希望它回到开始或结束。...意思是，在与手势相关的代码方面，行为本身应该是默认滚动。

    1.9K40

    Flutter | 事件处理

    一次完整的手势过程是指用户手指按下到抬起的整个过程，期间，用户按下后可能会移动，也可能不移动。...super.dispose(); } 复制代码 注意：使用 GestureRecognizer 之后，一定要调用其 dispose 方法来释放资源(主要是取消内部的计时器)，运行效果如下： 手势竞争与冲突...实际上取决于第一次移动时两个轴上的位移分量，那个轴的大，那么哪个轴就会在本次滑动事件中胜出 实际上 Flutter 中引入了一个 Arenal 的概念，直译为 竞技场 的意思，每一个手势识别器(GestureRecognizer...例如有一个 ListView，他的第一个子组件也是 ListView，如果滑动子 ListView，父 ListView 会动吗？...，而竞争者发生在手指按下后首次移动时 上例中获胜的条件是，首次移动时的位置在水平和垂直方向上分量大的一个获胜 手势冲突 由于手势竞争最终只有一个胜出者，所以，当有多个手势识别器时，可能会产生冲突； 例如有一个

    2.8K10

    Human Interface Guidelines —— Scroll Views

    自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...随着人们轻扫，轻弹，拖动，点按和捏动，scroll view会跟随手势，以自然的方式展示或缩放内容。...Scroll view也可以配置为以分页模式运行，这时scroll显示一个全新的内容页面，而不是在当前页面上移动（如红板报）。 ? 红板报 使用时注意 ·适当地支持缩放行为。...如果显示scroll view时显示页面控件，请禁用同一轴上的scrolling indicator以避免混淆。...·一般来说，一次显示一个scroll view 滚动时人们经常做出大滑动手势，并且很难避免与同一屏幕上的邻近scroll view进行交互。

    1.2K80

    touch.js的使用总结

    ），可接受多个事件以空格分开；支持原生事件的透传 callback    function  事件处理函数, 移除函数与绑定函数必须为同一引用; 二、部分手势事件 1、缩放 pinchstart缩放手势起点...pinchend缩放手势终点 pinch缩放手势 pinchin收缩 pinchout放大 2、旋转 rotateleft向左旋转 rotateright向右旋转 rotate旋转 3、滑动 swipestart...滑动手势起点 swiping滑动中 swipeend滑动手势终点 swipeleft向左滑动 swiperight向右滑动 swipeup向上滑动 swipedown向下滑动 swipe滑动 4、拖动..., 向左移动时为负数 distanceY, y          手势事件y方向的位移值, 向上移动时为负数 angle            rotate事件触发时旋转的角度 duration                  ...touchstart 与 touchend之间的时间戳 factor             swipe事件加速度因子 startRotate启动单指旋转方法，在某个元素的touchstart触发时调用

    1.8K10

    Touch 移动设备上的 手势识别 与 Js事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。...类型function， 事件处理函数, 移除函数与绑定函数必须为同一引用 2、部分手势事件 图片 图片 3、部分事件处理函数 touchstart //手指刚接触屏幕时触发 touchmove /...~ pinchin 收缩 ~ pinchout 放大 旋转 rotateleft 向左旋转 ~ rotateright 向右旋转 ~ rotate 旋 转 滑动 swipestart 滑动手势起点 ~...swiping 滑动中 ~ swipeend 滑动手势终点 ~ swipeleft 向左滑动 ~ swiperight 向右滑动 ~ swipeup 向上滑动 ~ swipedown 向下滑动 ~ swipe..., y 手势事件y方向的位移值, 向上移动时为负数 angle rotate事件触发时旋转的角度 duration touchstart 与 touchend之间的时间戳 factor swipe事件加速度因子

    4.1K40

    你关注过吗？动效设计的空间感

    你可以不用看键盘盲打吗？你可以通过记忆和感觉来回想起手机装到了哪只口袋里吗？该走哪条路，想起来了吗？黑夜中还能记得去厕所的路怎么走吗？ 我问了这么多，你肯定会回答，我能。...滑动具体项，移动会揭示出后面的删除按钮。点击删除图标，所选项会立即有一种崩塌般的运动感。 如果我们用缓动移动的方式让物体离开屏幕呢？ ?...或许我们可以让用户可以通过swipe手势滑动界面，让用户可以看到移出屏幕、被取代的列表项。 ?...相似的，如果你点击“x”按钮，那么自动会移动到左边，点“心”按钮，会移动到右面，按钮的动画效果与手势的动画效果互相援引。 ?...Facebook的滑动关闭 ? 1439278106895453.gif 这个动画采用了经典的Lightbox效果，但是除此之外。点击图片，图片会移动到前景。

    1.2K20

    Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套

    虽然从我个人体验上并不觉得这是个问题，但是如果产品硬是要你修改，难道要自己重写 PageView 的手势响应吗？...，也很触发 PageView 的水平滑动，只有横向移动时才会触发 PageView 的手势，当然， 如果要说这个粗暴的写法有什么问题的话，大概就是降低了 PageView 响应的灵敏度...update(details);}这里有个小知识点：如上代码所示，我们可以简单通过 details.primaryDelta 判断滑动方向和移动的是否是主轴 最后如下 GIF 所示，可以看到 PageView...有了前面的思路，其实实现这个逻辑也是异曲同工：把 PageView 和 ListView 的滑动禁用，然后通过 RawGestureDetector 自己管理，不同的就是手势方法分发的差异。...，就不响应顶部 PageView 的事件如果此时 ListView 处于顶部未滑动，判断手势位置是否在 PageView 里，如果是响应 PageView 的事件  void _handleDragStart

    2.1K20

    Flutter 的手势（GestureDetector）分析详解一、手势识别器分类二、手势识别器的相关闭包函数统计分析表：

    目录： 一、手势识别器分类 二、手势识别器的相关闭包函数统计分析 三、各种手势识别器的使用详解 四、手势识别器混合使用 五、手势识别器使用时遇到的坑 一、手势识别器分类 GestureDetector...}, onTapCancel: () {}, 双击： onDoubleTap: () {}, 长按： onLongPress: () {}, onLongPressUp: () {}, 垂直滑动...onVerticalDragUpdate: (details) {}, onVerticalDragEnd: (details) {}, onVerticalDragCancel: () {}, 水平滑动...onPanDown: (details) {}, 指针已经接触屏幕并开始移动。 onPanStart: (details) {}, 与屏幕接触并移动的指针再次移动。...onPanUpdate: (details) {}, 先前与屏幕接触并移动的指针不再与屏幕接触，并且当它停止接触屏幕时以特定速度移动。

    2.6K30

    【技巧】ionic3的手势Gestures

    临睡前写点东西，时间有限，又是一篇简单的文章，是关于手势的，因为白天有人问到。 手势Gestures，ionic官网上的文档描述非常简单，就下面一段就没了，估计很多人看完直接就懵了：只有6个事件吗？...手势.png 我粗略搜索了ionic关于手势事件的文章，像pressup等内容的，居然没有，orz……ionic常常使用流行的库来补充自身，像slide组件就是封装了swiper，而手势是使用了另一个有名的库...所以我们通过了解HammerJS就可以知道ionic3的手势事件——其实是6种，我简单列一下分类及其下事件： 一、pan——平移 ? pan.png 最小平移距离为10px，才会识别为pan....rotate.png 最少旋转角度为0（我怀疑这个表述），才会识别为rotate rotate rotatestart rotatemove rotateend rotatecancel 五、swipe——滑动...swipe.png 要求移动速度0.3px/ms，移动距离超过10px，才会识别为swipe swipe swipeleft swiperight swipeup swipedown 六、tap—

    74230

    App自动化测试：高级控件交互技巧

    简介APP 的控件元素不仅涵盖了基础用户界面操作，还包括用户与应用程序中更复杂、功能丰富的空间之间的互动。这种交互远不止于简单的按钮或输入框。...通过借助 Appium 的 Actions，能够完成对应用程序进行手势识别的交互。这意味着可以通过各种手势，如滑动、缩放、长按等，实现更灵活、直观的用户体验。...这一功能对于移动应用的全面测试和质量保证至关重要。...而 Actions 则适用于移动端应用程序的自动化测试，通过 Appium 控制设备或模拟器执行各种手势操作。...)打开应用点击【设置手势】完成手势操作（如图）实现手势滑动时，通常需要结合坐标，并可通过设置设备的输入选项，从界面中找到具体的坐标点。

    14110

    干货 | 携程机票RN复杂交互实践

    二、方案设计 项目主要涉及前端页面交互UI改造，将往返程放入同一个页面中以黄金比例分割展示往返内容，通过动画与手势，进行两种状态之间的相互切换。方案的动画模式图如下： ?...// 手势开始onPanResponderStart// 手势移动，项目使用该方法作为跟手移动回调onPanResponderMove// 松手TouchUponPanResponderRelease...，当用户在屏幕快速滑动时从onPanResponderTerminate事件获得的移动参数不可靠与预期不符，此时无论移动方向，事件返回的代表手势移动距离的参数dx均会为0。...项目中将动画移动的距离作为滑动方向的依据，当为0时无法判断手势的移动方向。...因此解决这一问题的方案如下，结合dx与tempGestureDirection解决该问题。 ? 3.2 动画 在手势左右滑动切换往返程的同时，List中的航班卡片也会以动画的方式在两种状态间切换。

    4.8K20

    【设计】近期发现的 APP UI 设计趋势

    这是我们总结出的 2022 年移动应用 UI 设计趋势 1、运动和动画 2、手势和滑动体验 3、90年代风格 4、图形深度 5、黑暗模式 6、排版 7、增强现实和虚拟现实 8、渐变和透明元素 1、动效和动画...与具有长描述的静态内容不同，动画可以保留用户的注意力并使应用程序更具吸引力。用动画突出重要的东西是一个好主意。例如，您可以为应用程序中的按钮设置动画，以使用户与应用程序的交互更好、更直接。...2、手势和滑动体验 与电脑上的网页端相反，手势和滑动体验使移动设备更具吸引力。我们每天花费数小时滚动和滑动操作。按钮和其他动作可能会刺激和分散注意力。...建议用滑动功能替换按钮。尝试滑动动作的动画会很有帮助。例如，图书应用程序通常使用动画来翻页。 3、90年代怀旧风格 90 年代的风格影响了所有领域，甚至是移动应用程序的设计。...你还记得那些来自 Instagram 的功能吗？让我们可以通过应用程序和移动相机将不同的角色放置在我们想要的任何地方吗？然后你就知道这有多有趣了。此外，它不仅有趣而且高效。

    1.1K30

    移动端App自动化之触屏操作自动化

    工作中我们经常需要对应用的页面进行手势操作，比如滑动、长按、拖动等，AppiumDriver 为我们提供一个模拟手势操作的辅助类 TouchAction，可以通过它对手机屏幕进行手势操作。...x 单位，沿着 y 轴向下移动 y 单位。...action.press(el1).wait(100).move_to\ (el2).wait(100).release().perform() ‍ 上面代码可以看出，首先定位两个元素 el1 与...el2 ，分别作为滑动过程中起点元素和终点元素，将我们滑动的起点元素与终点元素找到之后，创建一个 TouchAction 对象，调用里面的 press( ) 方法实现起点元素的点击，使用 wait( )...方法在事件之间添加等待，使用 move_to( ) 方法完成手势的移动操作，然后调用 release( ) 方法来完成手势的抬起，最后调用 perform( ) 方法对添加到 TouchAction

    47210

    移动端App自动化之触屏操作自动化

    本文节选自霍格沃兹测试学院内部教材 工作中我们经常需要对应用的页面进行手势操作，比如滑动、长按、拖动等，AppiumDriver 为我们提供一个模拟手势操作的辅助类 TouchAction，可以通过它对手机屏幕进行手势操作...TouchAction 常用的手势操作 TouchAction 提供的常用的手势操作有如下操作： Press 按下 release 释放 move_to 移动 tap 点击 longPress 长按...x 单位，沿着 y 轴向下移动 y 单位。...el2 ，分别作为滑动过程中起点元素和终点元素，将我们滑动的起点元素与终点元素找到之后，创建一个 TouchAction 对象，调用里面的 press( ) 方法实现起点元素的点击，使用 wait( )...方法在事件之间添加等待，使用 move_to( ) 方法完成手势的移动操作，然后调用 release( ) 方法来完成手势的抬起，最后调用 perform( ) 方法对添加到 TouchAction

    48920
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券