主题切换过渡。

哈喽大家好，前段时间我在m的plus官网发现个特别有意思的效果，今天来一起看一下。点击，主题切换的动画做的特别好，是怎么实现的？看一下这个app i，这个app i叫vivo transition app i，看一下它的介绍。

它说这个app i提供了一种机制，可以在更新盗墓内容的同时轻松的创建不同盗墓状态之间的动画过渡，同时也可以在单个步骤中更新盗墓的内容。不太懂是吧？接着往下看，这里面的内容有点多，就不一一介绍了，如果私下想解锁什么新姿势自己研究。

今天来看一下要用到的东西。到这里来，当在调用document start view transition的时候，app i会截取当前页面的屏幕截图。第二就是这个方法，接收了一个毁掉函数，就是需要在毁掉函数里面去更新到状态，这个时候会产生一个动画，到最后会提供给一组尾元素的数。

在这个里面需要用到下面这两个view transition，o的是旧页面的屏幕截图，view transition六是新页面的屏幕截图，需要用这两个截图来完成过渡的动画。

接下来看一下自己写的案例，在这个案例里面写了两套cs的主题色，在按钮点击的时候让它切换一下主题的样式，这样就会有主题切换的效果。点击，还是可以的，但是现在并没有一个动画，所以来实现一下它。

在这里需要调用document start view transition，接收一个回调函数，在回调函数里面去更新盗墓的状态就会有动画的效果。到页面上看一下，点击，现在是不是有一个淡入淡出的过渡了？但这并不是想要的，来实现想要的过渡效果。

首先需要获取到喘息神app i的实力，拿到它之后需要利用它的一些属性来实现过渡动画，自定义的过渡动画。在这里就使用readin的属性来实现动画。在readin里面是promes，所以要在它的点任里面去实现。在这里创建自定义动画，自定义动画是什么样的？是不是一个圆形的扩散的效果？

这个怎么弄？是不是可以用cleverpass来裁剪它的屏幕截图，然后慢慢的去放大它的半径，是不是就有一个动画了？现在来实现一下，在这里就用gs实现动画了，要是喜欢用cs实现也可以，方案是一样的。

·这个animate第一个参数是关键帧，第二个是选项，在这个里面去裁剪它的clipperpass。第一个参数就给它一个circle，就用ai实现了。这个意思就是从半径从零开始过渡到半径百分之百，默认的中心原点是整个屏幕的中心百分之五十，然后给它一个参数，给它一些配置。

·因为要给屏幕截图做一个过渡，所以应该给它的美元素做过渡动画。这个元素叫啥？是不是叫v u transition new？过渡时间拉长一点，拉长到一秒钟。到页面上来看一下，好像效果不对，这是为什么？是因为默认有一个动画把动画给覆盖掉了，所以在这里要把默认的动画给关掉。

·唯有喘c式，还有一个old，把它动画给关掉。再到页面上看一下，可以了，是不是有那个味了？这个时候需要把它的原点放到鼠标点击的位置。再来改一下代码，点击的位置是哪？是不是可以通过实践对象拿到？拿到之后只需要给它的圆点变换到这个位置就可以了。

·下面也是一样的，复制过来，到页面上来看一下，点击，但是半径好像不太对不对？看半径到这里就直接过来了，这是因为给它的半径的值不对，来算一下半径要给它一个具体的值。

·来看一下这张图，这张图里要给它的半径实际上是点距离屏幕边缘最远的位置，这样才能覆盖到整个屏幕。距离最远的位置是哪？是这里吗？不是，应该是这个地方，这个地方才是最远的。

·距离怎么计算出来？沈阳是不是可以用三角函数？知道这两个边长可以算出来这个边的长度，这两个边的边长好算吗？先来看一下边长是不是就是整个屏幕的高度减掉这个位置，减去y的位置，边长是不是一样的？是不是屏幕的宽度减去x的位置？

·来算一下target，ai已经帮生成出来了，好像不太对，自己写好了。

它的值要怎么去算？re window 点减去x，window 点inner head减去y，拿到的这个值给到它，好看一下，点击，这样是不是就可以了？但这样还是有一个问题，问题就是如果这个按钮在这边，来看一下，来调整一下这个按钮的位置，直接选中这个button，给它个定位，定位让它left等于百分之六十，直接到最右边好了百分之九十。

这个时候就不对了，这个时候是不是就应该是这个位置了？这个位置实际上本身就是x的位置，所以这个地方代码还是要改一下，应该取一个最大值，是不是x和inner ways减去x的一个最大值，下面也是一样的。再来看一下，这样是不是就可以了？过渡动画就完成了。