太丝滑了！了解一下原生的视图转换动画 View Transitions API

最新推荐文章于 2024-09-03 16:34:25 发布
最新推荐文章于 2024-09-03 16:34:25 发布
阅读量1.1k 收藏 18
点赞数 18
文章标签： View Transitions 切换动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83384536/article/details/139926194
版权

原文来源于：前端侦探；作者：XboxYan

如有侵权，联系删除

在原生 APP 中，我们经常会看到那种丝滑又舒适的页面切换动画，比如这样的

图片

Android 里一般称之为共享元素（shareElement）动画，也就是动画前后有一个（或多个）相同的元素，起到前后过渡的效果，可以很清楚的看到元素的变化过程，而并不是简单的消失和出现。

现在，web 中（Chrome 111+）也迎来了这样一个特性，叫做视图转换动画 View Transitions[1]，又称“转场动画”，也能很轻松的实现这类效果，一起了解一下吧

一、快速认识 View Transition

先从一个简单的例子来认识一下。

比如，下面有一个网格列表

<div class="list" id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

简单修饰后如下

图片

然后我们实现一个简单交互，点击每个元素，元素就会被删除


list.addEventListener('click', function(ev){
  if (ev.target.className === 'item') {
    ev.target.remove()
  }
})

可以得到这样的效果

图片

功能正常，就是有点太过生硬了

现在轮到 View Transitions 出场了！我们只需要在改变状态的地方添加document.startViewTransition，如下


list.addEventListener('click', function(ev){
  if (ev.target.className === 'item') {
    document.startViewTransition(() => { // 开始视图变换
      ev.target.remove()
    });
  }
})

当然为了兼容不支持的浏览器，可以做一下判断


list.addEventListener('click', function(ev){
  if (document.startViewTransition) { // 如果支持就视图变换
    document.startViewTransition(() => { // 开始视图变换
      ev.target.remove()
    });
  } else { // 不支持就执行原来的逻辑
    ev.target.remove()
  }
})

现在效果如下

图片

删除前后现在有一个淡入淡出的效果了，也就是默认的动画效果，我们可以把这个动画时长设置大一点，如下


::view-transition-old(root), /* 旧视图*/
::view-transition-new(root) { /* 新视图*/
  animation-duration: 2s;
}

这两个伪元素我们后面再做介绍，先看效果

图片

是不是明显感觉过渡变慢了许多？

但是这种动画还是不够舒服，是一种整体的变化，看不出删除前后元素的位置变化。

接下来我们给每个元素指定一个标识，用来标记变化前后的状态，为了方便控制，可以借助 CSS 变量


<div class="list" id="list">
  <div class="item" style="--i: a1">1</div>
  <div class="item" style="--i: a2">2</div>
  <div class="item" style="--i: a3">3</div>
  <div class="item" style="--i: a4">4</div>
  <div class="item" style="--i: a5">5</div>
  <div class="item" style="--i: a6">6</div>
  <div class="item" style="--i: a7">7</div>
  <div class="item" style="--i: a8">8</div>
  <div class="item" style="--i: a9">9</div>
  <div class="item" style="--i: a10">10</div>
</div>

这里通过view-transition-name来设置名称


.item{
  view-transition-name: var(--i);
}

然后可以得到这样的效果，每个元素在变化前后会自动找到之前的位置，并且平滑的移动过去，如下

图片

完整代码可以查看

  • view-transition sort (juejin.cn)[2]

  • view-transition sort (codepen.io)[3]

是不是非常丝滑？这就是 View Transitions 的魅力！

二、View Transition 的核心概念

为啥仅仅加了一点点代码就是实现了如此顺畅的动画呢？为啥浏览器可以知道前后的元素位置关系呢？这里简单介绍一下变化原理。

整个 JS 部分只有一行核心代码，也就是document.startViewTransition，表示开始视图变换

document.startViewTransition(() => {
  // 变化操作
});

整个过程包括 3 部分

  1. 调用document.startViewTransition，浏览器会捕捉当前页面的状态，类似于实时截图，或者“快照”

  2. 执行实际的 dom 变化，再次记录变化后的页面状态（截图）

  3. 触发两者的过渡动画，包括透明度、位移等变化，也可以自定义 CSS 动画

下面是一个示意图

图片

在动画执行的过程中，还会在页面根节点自动创建以下伪元素

 

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)
 

 

下面是控制台的截图
 

 

图片
 

其中，::view-transition-old表示「旧视图」的状态，也就是变化之前的截图，::view-transition-new表示「新视图」的状态，也就是变化之后的截图。
 

默认情况下，整个页面root都会作为一个状态，也就是上面的::view-transition-group(root)，在切换前后会执行淡入淡出动画，如下
 

 


:root::view-transition-new(root) {
  animation-name: -ua-view-transition-fade-in; /*淡入动画*/
}
:root::view-transition-old(root) {
  animation-name: -ua-view-transition-fade-out; /*淡出动画*/
}
 

 

这也是为什么在使用了document.startViewTransition后整个页面会有淡入淡出的效果了
 

图片
 

为了让每个元素都有自己的过渡状态，这里需要给每个元素都指定名称
 

 

.item{
  view-transition-name: item-1;
}
 

 

这样指定名称后，每个名称都会创建一个::view-transition-group，表示独立的分组
 

 

图片
 

这样在变化前后view-transition-name相同的部分就会一一自动执行过渡动画了，以第4、5个元素为例（在3删除以后）
 

 

图片
 

最后就会得到这样的效果
 

图片
 

核心概念就这些了，下面再来看几个例子
 

三、不同元素之间的过渡
 

视图变化其实和元素是否相同没有关联，有关联的只有view-transition-name，浏览器是根据view-transition-name寻找的，也就是相同名称的元素在前后会有一个过渡动画。
 

比如下面这样一个例子
 

 

图片
 

每个按钮在打开弹窗时，都可以清楚的看到弹窗是从哪里出现的，如何实现这样的效果呢？
 

从本质上看，其实就是「按钮到弹窗的视图变换」，按照前面讲到的，可能会想到给前后加上相同的view-transition-name，下面是HTML结构
 


<div class="bnt-group" id="group">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>
<dialog id="dialog">
  <form method="dialog">
    我是弹窗
    <button>关闭</button>
  </form>
</dialog>
 

 

尝试一下
 


button,dialog{
  view-transition-name: dialog;
}
 

 

然后添加点击打开弹窗事件
 


group.addEventListener('click', function(ev){
  if (ev.target.tagName === 'BUTTON') {
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        dialog.showModal()
      });
    } else {
      dialog.showModal()
    }
  }
})
 

 

这样会有什么问题吗？运行如下
 

 

图片
 

很明显报错了，意思就是一个页面中不能有相同的view-transition-name。严格来讲，是「不能同时出现」，如果其他元素都是隐藏的，只有一个是显示的，也没有问题。其实仔细想一下，也很好理解，如果同时有两个相同的名称，并且都可见，最后变换的时候该以哪一个为准呢？
 

所以，在这种情况下，正确的做法应该是动态设置view-transition-name，比如默认不给按钮添加名称，只有在点击的时候才添加，然后在变换结束之后再移除按钮的view-transition-name，实现如下
 


group.addEventListener('click', function(ev){
  if (ev.target.tagName === 'BUTTON') {
    ev.target.style.viewTransitionName = 'dialog' // 动态添加 viewTransitionName
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        ev.target.style.viewTransitionName = '' // 结束后移除 viewTransitionName
        dialog.showModal()
      });
    } else {
      dialog.showModal()
    }
  }
})

 

 

这样就实现了动态缩放的效果
 

 

图片
 

大致已经实现想要的效果，不过还有一个小问题，我们把速度放慢一点（把动画时长设置长一点）
 

 

图片
 

可以清楚的看到，原本的按钮先放大到了弹窗大小，然后逐渐消失。这个过程是我们不需要的，有没有办法去掉呢？
 

当然也是可以的！原本的按钮其实就是旧视图，也就是点击之前的截图，我们只需要将这个视图隐藏起来就行了
 


::view-transition-old(dialog) {
  display: none;
}
 

 

这样就完美实现了从哪里点击就从哪里打开的效果
 

 

图片
 

完整代码可以查看：
 

  •  
    view-transition-dialog (juejin.cn)[4]
     
  •  
    view-transition-dialog (codepen.io)[5]
     
 

四、自定义过渡动画
 

通过前面的例子可以看出，默认情况下，视图转换动画是一种淡入淡出的动画，然后还有如果位置、大小不同，也会平滑过渡。
 

除此之外，我们还可以手动指定过渡动画。比如下面这个例子
 

 

图片
 

这是一个黑暗模式的简易模型，实现也非常简单，准备两套主题，这里用color-scheme实现
 

.dark{
  color-scheme: dark;
}
 

 

然后通过点击动态给html切换dark类名
 


btn.addEventListener('click', function(ev){
  document.documentElement.classList.toggle('dark')
})
 

 

这样就得到了主题切换效果
 

 

图片
 

接着，我们添加视图转换动画
 


btn.addEventListener('click', function(ev){
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      document.documentElement.classList.toggle('dark')
    });
  } else {
    document.documentElement.classList.toggle('dark')
  }
})
 

 

这样就得到了一个默认的淡入淡出的切换效果（为了方便观察，将动画时长延长了）
 

 

图片
 

你可以把前后变化想象成是两张截图的变化，如果要实现点击出现圆形裁剪动画，其实就是在新视图上执行一个裁剪动画，由于是完全重叠的，所以看着像是一种穿透扩散的效果
 

 

图片
 

动画很简单，就是一个clip-path动画
 


@keyframes clip {
  from {
    clip-path: circle(0%);
  }
  to{
    clip-path: circle(100%);
  }
}
 

 

我们把这个动画放在::view-transition-new中
 


::view-transition-new(root) {
  /* mix-blend-mode: normal; */
  animation: clip .5s ease-in;
  /* animation-duration: 2s; */
}
 

 

效果如下
 

 

 

图片
 

是不是还有点奇怪？这是因为默认的一些样式导致，包括原有的淡出效果，还有混合模式
 

 

图片
 

所以还需要去除这些影响
 


::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: clip .5s ease-in;
}
 

 

当然你可以把鼠标点击的位置传递到页面根节点
 


btn.addEventListener('click', function(ev){
  document.documentElement.style.setProperty('--x', ev.clientX + 'px')
  document.documentElement.style.setProperty('--y', ev.clientY + 'px')
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      document.documentElement.classList.toggle('dark')
    });
  } else {
    document.documentElement.classList.toggle('dark')
  }
})
 

 

动画里直接通过CSS 变量获取
 


@keyframes clip {
  from {
    clip-path: circle(0% at var(--x) var(--y));
  }
  to{
    clip-path: circle(100% at var(--x) var(--y));
  }
}
 

 

这样就实现了完美的扩散切换效果
 

 

图片
 

完整代码可以查看：
 

  •  
    view transition theme change - (juejin.cn)[6]
     
  •  
    view transition theme change (codepen.io)[7]
     
 

五、其他案例
 

找了几个有趣的例子
 

只要涉及到前后过渡变化的，都可以考虑用这个特性，例如下面的拖拽排序
 

 

图片
 

 
 
https://codepen.io/argyleink/pen/rNQZbLr
 

 

再比如这样一个数字过渡动画
 

 

图片
 

 
 
https://codepen.io/argyleink/pen/jOQKdeW
 

 

还有类似于 APP 的转场动画（多页面跳转）
 

 

图片
 

 
 
https://simple-set-demos.glitch.me/6-expanding-image/
 

 

五、总结和说明
 

总的来说，原生的视图转换动画可以很轻松的实现两种状态的过渡，让 web 也能实现媲美原生 APP 的动画体验，下面再来回顾一下整个变化过程：
 

  1.  
    调用document.startViewTransition，浏览器会捕捉当前页面的状态，类似于实时截图，或者“快照”
     
  2.  
    执行实际的 dom 变化，再次记录变化后的页面状态（截图）
     
  3.  
    触发两者的过渡动画，包括透明度、位移等变化，也可以自定义 CSS 动画
     
  4.  
    默认情况下是整个页面的淡入淡出变化
     
  5.  
    ::view-transition-old表示「旧视图」的状态，也就是变化之前的截图，::view-transition-new表示「新视图」的状态，也就是变化之后的截图。
     
  6.  
    如果需要指定具体元素的变化，可以给该元素指定view-transition-name
     
  7.  
    前后变化不一定要同一元素，浏览器是根据view-transition-name寻找的
     
  8.  
    同一时间页面上不能出现两个相同view-transition-name的元素，不然视图变化会失效
     
 

另外，视图转换动画应该作为一种「体验增强」的功能，而非必要功能，在使用动画时其实拖慢了页面打开或者更新的速度，并且在动画过程中，页面是完全“冻结”的，做不了任何事情，因此需要衡量好动画的时间，如果页面本身就很慢就更不要使用这些动画了。
 

[1]
 

View Transitions： https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
 

[2]view-transition sort (juejin.cn)： https://code.juejin.cn/pen/7268263402853072931
 

[3]view-transition sort (codepen.io)： https://codepen.io/xboxyan/pen/BavBevP
 

[4]view-transition-dialog (juejin.cn)： https://code.juejin.cn/pen/7268262983178911779
 

[5]view-transition-dialog (codepen.io)： https://codepen.io/xboxyan/pen/WNLeBgY
 

[6]view transition theme change - (juejin.cn)： https://code.juejin.cn/pen/7268257573277532219
 

[7]view transition theme change (codepen.io)： https://codepen.io/xboxyan/pen/poqzmLY

                

        

        

        

    

  


    

      

        

            

              
                
                  程序员小英
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
swift-View2ViewTransition简单的框架实现两个视图切换及转场

				
			

			

				

					08-15
				

			

		

		

			
				
View2ViewTransition：简单的框架实现两个视图切换及转场

			
		

	



                

            
              



	

		

			

				
					
Transitions-Everywhere,用于动画的android转换api的backport。动画移植到Android 4.0+。与Android 2.2兼容的API+.zip

				
			

			

				

					10-12
				

			

		

		

			
				
Originally this library was a full backport of Android Platform's Transitions API. Then all the bug fixes from the library were ported into AndroidX Transitions (previously Support library).

			
		

	



              


  
              

                


	

		

			

				
					
startViewTransition使用及踩坑

					
最新发布

				
			

			

				

					weixin_65808257的博客
				

				

					09-03
					
					363
					
				

			

		

		

			
				
属性控制元素与其背景之间的混合效果。正常模式意味着元素会直接覆盖在其背景上，不会发生任何混合效果。这确保了视图过渡过程中，旧视图和新视图能够清晰地显示而不受背景混合的影响。其中startViewTransition相当于我们css中的过渡（startViewTransition是一个较新的api。当然还有很多用处 我只是采用了我需要的。有了上面的代码就可以成功的完成这样。怎么看都不对 为什么不是那种炫酷的。接下来就需要一个css。

			
		

	





	

		

			

				
					
了解 View Transitions API

				
			

			

				

					文摘资讯
				

				

					12-02
					
					240
					
				

			

		

		

			
				
View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。概念和用法视图过渡是一种流行的设计选择，可以减少用户认知负荷，帮助他们保持上下文，并减少他们在应用程序的状态或视图之间移动时感知的加载延迟。但是，在 Web 上创建视图过渡历来很困难。在单页应用程序（SPA）中，状态之间的过...

			
		

	



		

			
		



	

		

			

				
					
用全新的 View Transitions API实现 B 站 PC 端的深色主题切换

				
			

			

				

					LuckyWinty的博客
				

				

					04-10
					
					1136
					
				

			

		

		

			
				
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群原理分析目前深色模式基本是通过prefers-color-scheme这个系统预设属性来初始化的，如需具体切换时，可以通过JS给html根节点增加class的方式来脱离系统预设（如：tailwindcss中的darkTheme: 'class'这个配置）。具体分析到这个客户端的华丽切换效果，如此细粒度的动画这应该不是单纯的css或者js能控...

			
		

	





	

		

			

				
					
View Transition API + vue3 + Element-plus

				
			

			

				

					wrz2018的博客
				

				

					12-28
					
					1066
					
				

			

		

		

			
				
View Transition API + View Transition API + vue3 + Element-plus 
简单使用实例，该web API目前还很新，适合在自己网站上使用起来

			
		

	





	

		

			

				
					
使用全新的 View Transitions API，实现 B 站 PC 客户端的深色主题切换效果

				
			

			

				

					我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
				

				

					04-13
					
					719
					
				

			

		

		

			
				
原理分析目前深色模式基本是通过prefers-color-scheme这个系统预设属性来初始化的，如需具体切换时，可以通过JS给html根节点增加class的方式来脱离系统预设（如：tailwindcss中的darkTheme: 'class'这个配置）。具体分析到这个客户端的华丽切换效果，如此细粒度的动画这应该不是单纯的css或者js能控制的。个人猜测应该是通过electron对切换前的当前AP...

			
		

	





	

		

			

				
					
IOS应用源码——ViewTransitions.rar

				
			

			

				

					10-14
				

			

		

		

			
				
【标题】"IOS应用源码——ViewTransitions.rar"揭示了这个压缩包是关于iOS平台上的视图转换动画实现的源代码。在iOS开发中，视图转换是用户体验中的重要一环，它涉及到用户界面元素从一个状态平滑地过渡到另一个状态...

			
		

	





	

		

			

				
					
unity相机镜头转换Camera Transitions

				
			

			

				

					11-09
				

			

		

		

			
				
"相机镜头转换"（Camera Transitions）是Unity中一个重要的概念，它允许开发者通过平滑而富有创意的方式在不同摄像机视角之间切换，从而增强游戏的视觉效果和玩家的沉浸感。  "Camera Transitions 1.10"是一个专门...

			
		

	





	

		

			

				
					
Transitions-150组视频转场动画

				
			

			

				

					10-29
				

			

		

		

			
				
标题中的“Transitions-150组视频转场动画”是指一个包含150个不同视频转场效果的资源集合，这些转场效果是专为Adobe After Effects（简称AE）2018版本设计的。在视频编辑和制作中，转场动画用于连接不同的视频片段...

			
		

	





	

		

			

				
					
movies_example:关于如何通过新的Transitions API使用共享元素的极其简单的示例

				
			

			

				

					05-13
				

			

		

		

			
				
标题提到的"movies_example"是一个关于如何利用新的Transitions API实现共享元素动画的简单示例。这个API是Android Lollipop（API级别21）引入的新特性，它使得在Activity之间平滑地转移视图成为可能，从而创建出...

			
		

	





	

		

			

				
					
VueUse、View Transitions API实现暗黑模式主题动画切换效果

				
			

			

				

					张先生的前端日志
				

				

					11-08
					
					2255
					
				

			

		

		

			
				
简单使用VueUse、View Transitions API进行的动画操作，复制粘贴即可

			
		

	





	

		

			

				
					
View Transition

				
			

			

				

					weixin_34228387的博客
				

				

					01-28
					
					94
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
android支持两种动画api,Android动画的另一种思路-Transition API

				
			

			

				

					weixin_35977770的博客
				

				

					05-27
					
					135
					
				

			

		

		

			
				
| 传统的动画实现Android UI界面动画效果的实现，一般是依赖于三种： a.Tweened Animations-补间动画，包括旋转、平移、缩放、透明度渐变等； b.Frame-by-Frame Animations-帧动画，一帧一帧的播放；(有些地方也叫Drawable Animations) c.Property Animations-属性动画，view或object的属性动画；前两种同...

			
		

	





	

		

			

				
					
ConstraintLayout2.0一篇写不完之ViewTransition

				
			

			

				

					eclipse_xu
				

				

					08-19
					
					592
					
				

			

		

		

			
				
点击上方蓝字关注我，知识会给你力量ViewTransition是ConstraintLayout2.x中的一个新标签，它可以让你在MotionLayout中指定单个视图的动画。这允许你处理...

			
		

	





	

		

			

				
					
奇舞周刊第507期：通过 View Transition API 在状态之间添加丰富的过渡动画

				
			

			

				

					奇舞周刊
				

				

					09-22
					
					409
					
				

			

		

		

			
				
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■通过 View Transition API 在状态之间添加丰富的过渡动画W3C 2023 年度全球技术大会 (TPAC2023) 于今年9月 11 - 15 日召开。W3C CSS 工作组成员 Bramus Van Damme(Google) 为本届大会制作视频介绍 CSS 视图过渡模块：View T...

			
		

	





	

		

			

				
					
奇舞周刊第519期：用 View Transition API 在 Web 做出 Native 般丝滑的动画

				
			

			

				

					奇舞周刊
				

				

					01-26
					
					755
					
				

			

		

		

			
				
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧奇舞推荐■■■用 View Transition API 在 Web 做出 Native 般丝滑的动画介绍了 View Transition API 的使用和原理，通过该 API 可以在 Web 中实现类似 Native 般丝滑的动画效果。View Transition API 允许我们通过定义不同的 transiti...

			
		

	





	

		

			

				
					
仿写elemen-ui plus 主题切换动画（view Transitions Api）

				
			

			

				

					weixin_70573795的博客
				

				

					04-26
					
					951
					
				

			

		

		

			
				
但是，在 Web 上创建视图过渡历来很困难。像阅读位置丢失、焦点混乱和实时区域宣告的奇怪行为等无障碍问题，也可能由于新旧内容同时存在于 DOM 中而导致。1.处理新旧内容的加载和定位。3.防止用户与旧内容的意外交互而导致的问题。视图过渡是一种流行的设计选择，可以减少用户认知负荷，帮助他们保持上下文，并减少他们在应用程序的状态或视图之间移动时感知的加载延迟。View Transitions API 提供了一种更简单的方法来处理必需的 DOM 更改和过渡动画。网站中跨越不同页面）是不可能的。

			
		

	





	

		

			

				
					
探索iOS开发：ViewTransitions源码解析

				
			

			

				

					
				

			

		

		

			
				
ViewTransitions是一个专注于视图转换的IOS应用，可能涉及到视图转换的各种实现方式和效果。  知识点四：IOS源码分析 源码分析是理解程序运行原理的重要手段。通过阅读和理解源码，我们可以深入理解程序的内部机制，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值