彻底弄清 anchorPoint 和 position

最近在研读《iOS Core Animation Advanced Techniques》这一本书,想系统地学习下关于 CALayer、Transition、以及动画等知识点。大家可以在 gitbook 上面找到该书的翻译版本。

传送门  

在读到图层几何学这一章的时候,了解到了两个概念:anchorPoint 和 position。之前一直把 position 当成是矩形的中心点,如同 UIView 的 center 属性(事实上,在不改变 anchorPoint 的前提下,它确实是图层的中心点),但当 anchorPoint 改变的时候,我一下子懵逼了,为什么 position 不会改变,为什么frame会改变,为什么图形要往某个特定方向移动,而使 anchorPoint 和 position 重合?什么鬼...

怀着一定要搞懂的心态,我去网上查询了很多帖子,有的看了也没懂,有的给了我很大启发。现在也想把自己的理解在这里分享一下:

说白了,position 是什么?其实就是图层(layer)在父图层(superLayer)中的位置,图层的 size 定下了,那么应该把它放在父图层的什么位置,不就是由 position 定的吗?此时,父图层就会告诉这个儿子:喂,小子,这个 position 就是你在我地盘上的位置,你啊,如果将来要做 transition 变换,默认是以这个点为基准的。

儿子:哦,那我到时候做旋转那肯定也绕着这个点转了。deimo(但是)... 我不想老是绕着我的肚脐眼转啊,一点也不刺激,“能不能绕着我的头转?” 儿子对它爸说。

父图层一听,好啊,你小子,有想法啊,“那行,绕着你的哪一点转都可以,不过,你必须还在我 给你的 position 位置转!你的 position 位置不能变!”

儿子想:那我只能挪挪我的 frame 咯,不然没法按照老子的要求转了。 于是,它把自己的 anchorPoint 点移到了 position 位置上,愉快地开始转了=。=

所以,总结一下,anchorPoint 是相对于自身的位置,而 position 是相对于父图层的,改变 anchorPoint 只是更改了图层自身旋转地位置,但始终还是要通过改变 frame 使 anchorPoint 和 position 重合,这样它老子才不会骂它😄, 不知道这样的方式大家能不能看懂啊:)

好了,我的第一次简书分享也告一段落了。有什么问题大家一定!要!指出来!!!拜托了!

改变 anchorPoint 前后对照图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-model和.sync都是用于实现双向数据绑定的语法糖,但是它们有一些区别。 1. 作用范围: v-model主要用于表单元素的双向数据绑定,而.sync修饰符可以应用于自定义组件中的任意属性。 2. 语法形式: v-model使用简单的指令形式,例如`<input v-model="data">`,而.sync修饰符需要在自定义组件的属性前面加上`.sync`修饰符,例如`<my-component :custom-prop.sync="data">`。 3. 数据流动: v-model通过在子组件中使用`$emit`来改变父组件中的数据,而.sync修饰符则是通过父组件传递一个名为`update:propName`的自定义事件给子组件,子组件在修改数据时触发该事件来改变父组件中的数据。 总的来说,v-model适用于简单的双向数据绑定,而.sync修饰符则适用于自定义组件中的双向数据绑定。这样可以更加灵活地在父子组件之间进行数据的传递和同步。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [详解VUE自定义组件中用.sync修饰符与v-model的区别](https://download.csdn.net/download/weixin_38629391/12758140)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [下班前几分钟,我弄清了v-model与.sync的区别](https://blog.csdn.net/qq_41809113/article/details/125467297)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值