使用Shader制作loading旋转动画

效果图:

1.绕Z轴旋转的旋转矩阵

2.UV旋转的步骤

  (1) 由于旋转矩阵是绕原点旋转的,要把要旋转的UV坐标平移到原点

  

1 i.uv -= float2(0.5, 0.5);
2 float2 tempUV = i.uv;

  (2)旋转UV坐标

   

1 i.uv.x = cos(_Speed * _Time.y) * tempUV.x - sin(_Speed * _Time.y)*tempUV.y;
2                 i.uv.y = sin(_Speed * _Time.y) * tempUV.x + cos(_Speed * _Time.y) * tempUV.y;

(3)把多余部分的图片,设置采样点为(0,0)

1 if (abs(i.uv.x) > 0.5 || abs(i.uv.y) > 0.5)
2 {
3     i.uv = float2(0, 0);
4 }

(4)平移回去

  i.uv += float2(0.5, 0.5);

注意需要开启Alpha通道,并关闭ZWrite

 

  

  

原文地址:https://www.cnblogs.com/blackteeth/p/10323759.html

时间: 2024-08-29 17:46:11

使用Shader制作loading旋转动画的相关文章

教你怎样制作圆柱旋转动画课件

圆柱可以看成是矩形以它的一边所在的直线为轴,其余各边旋转一周而成的面所围成的几何体.那么几何画板圆柱旋转体怎么实现呢? 利用几何画板制作圆柱旋转体课件模板样图: 点击“动画点”就可以看到圆柱的形成过程,课件的具体操作如下: 1.作水平直线,并选中初始的现个点按下“Ctrl+H”将之隐藏.利用点工具在直线上构造点O.E.F.选中点O和点E,选择“构造”——“以圆心和圆周上的点绘圆”作以O为圆心的圆OE,两样的方法作出同心圆OF. 2.利用点工具在大圆上取点G,用线段工具连接OG交小圆于点H.选中点

用svg制作loading动画

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标       ystart:渐变开始点y坐标       xEnd:渐变结束点x坐标       yEnd:渐变结束点y坐标 这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi

利用css3制作旋转动画

利用css3功能强大,我们可以直接完成旋转动画的制作,而跳过复杂的javascript. html代码如下:demo01.html   <!DCTYPE html>       <head>           <meta type="utf-8"/>           <title>旋转动画</title>           <link rel="stylesheet" type="t

android旋转动画和平移动画详解,补充说一下如果制作gif动画放到csdn博客上

先上效果图: 我这里用的是GifCam来制作的gif动画,可以在http://download.csdn.net/detail/baidu_nod/7628461下载, 制作过程是先起一个模拟器,然后把GifCam的框拖到模拟器上面,点击Rec的new先,然后点击Rec,然后就save到本地成gif文件 这里做一个左右旋转,上下旋转,和左右移动的动画,先自己建立一个View的类,作为操作的对象: public class MyView extends View { private Paint m

用CSS3制作的旋转六面体动画

这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

Blend制作的下载动画

最近使用Blend制作了一个下载动画,感觉很有意思,所以这篇给各位介绍下如何使用Blend制作一个简单的下载动画的步骤 首先拖出一个圆,参数如下: 选中椭圆后单击Properties面板,选择“Fill”,选择“线性渐变”画笔 选择工具箱中的 ,可以看到椭圆上出现一个渐变箭头. 按照Alt键,拖动渐变的中心点: 调整后,椭圆大约如上所示,下面继续添加长宽均为60,画笔为白色的圆形 选择这两个图像,在“对象”菜单中分别操作对齐|水平居中,对齐|垂直居中命令,这个时候,两者会重叠在一起 在“对象”菜

CSS3 skew倾斜、rotate旋转动画

css3出现之前.我们实现一个对象的一组连续动画须要通过JavaScript或Jquery编写,脚本代码较为复杂: 若须要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jquery怎样实现),并且即使能实现预计花的时间代价及维护难度是非常大的,非常多时候仅仅能依靠绘图工具制作此类动画文件: 有时候在想假设不用脚本语言,也不用绘图工作制作动画文件.就能在网页上实现倾斜.旋转之类的动画效果多好. 近期挤出一些业余时间学习CSS3,当中就包括非常多动画演示样例,花了点时间学习和

android动画的透明度渐变、旋转动画、缩放动画、评议动画

这是我在学习android的时候做的一个小小的东西可以实现图片的旋转.平移.缩放.透明度的渐变 首先我们要创建一个android的项目 在自己的drawable-mdpi中添加自己的图片 然后在res目录中,创建一个名称是anim(动画)的目录,并且在该目录中实现图片的操作 首先是anim_alpha.xml定义一个实现透明渐变的动画该动画实现的是完全不透明-->完全透明---->完全不透明 <pre name="code" class="html"

HTML5 CSS3 诱人的实例: 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l