TWaver动画之雷达扫描效果

UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上的设计,而忽略了UI。在这个“看脸”的时代,就算产品的功能很强大,如果UI跟不上步伐,你的产品都会在客户心中大打折扣。

做安全和监控的项目中经常会进行扫描,一般会用一个gif图片来表示软件正在进行扫描,但是如果想更换这个图标的样式,就需要美工重新做图。TWaver提供了动画效果,如果对图标的动画样式不满意,可以通过简单的更改程序来实现,避免了美工的二次返工,提高了效率。切入正题,看我们怎么实现一个动画的雷达扫描图,首先注册一个图片,用HTML5的canvas画了一个静态的雷达图,如果你熟悉TWaver的话,下边这段代码应该不难。如果不熟悉的话,可以参考产品文档自定义绘制(draw)这一节的内容。

twaver.Util.registerImage(‘radar‘, {
      v: [
        {
          shape: ‘draw‘,
          draw: function (ctx, data, view) {
            var canvas = this.canvas,
              g = this.g,
              gradient = this.gradient,
              diameter = Math.floor(data.getWidth() * view.getZoom()),
              radius = diameter / 2,
              hueStart = 120,
              hueEnd = 170,
              hueDiff = Math.abs(hueEnd - hueStart),
              width = diameter,
              height = diameter;
            if (!canvas) {
              this.canvas = canvas = document.createElement(‘canvas‘);
            }

            if (width !== canvas.width || height !== canvas.height) {
              canvas.width = diameter;
              canvas.height = diameter;
              this.g = g = canvas.getContext(‘2d‘);
              this.gradient = gradient = g.createLinearGradient(radius, 0, 0, 0);
              gradient.addColorStop(0, ‘hsla(‘ + hueStart + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, 1)‘);
              gradient.addColorStop(1, ‘hsla(‘ + hueEnd + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, 0.1)‘);
            }

            g.globalCompositeOperation = ‘destination-out‘;
            g.fillStyle = ‘hsla(0, 0%, 0%, 0.1)‘;
            g.fillRect(0, 0, width, height);

            g.globalCompositeOperation = ‘lighter‘;
            var i;
            for (i = 0; i < 4; i++) {
              g.beginPath();
              g.arc(radius, radius, ((radius - 1) / 4) * (i + 1), 0, Math.PI * 2, false);
              g.strokeStyle = ‘hsla(‘ + (hueEnd - (i * (hueDiff / 4))) + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, 0.1)‘;
              g.lineWidth = 3;
              g.stroke();
            };

            g.beginPath();
            g.moveTo(radius - 1, 2);
            g.lineTo(radius - 1, height - 2);
            g.moveTo(2, radius - 1);
            g.lineTo(width - 2, radius - 1);
            g.strokeStyle = ‘hsla(‘ + ((hueStart + hueEnd) / 2) + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, .03)‘;
            g.stroke();

            g.save();
            g.translate(radius, radius);
            g.rotate(data.getClient(‘angle‘));
            g.beginPath();
            g.moveTo(0, 0);
            g.arc(0, 0, radius, -0.0349, 0.0349, false);
            g.closePath();
            g.fillStyle = gradient;
            g.fill();
            g.restore();

            ctx.scale(1 / view.getZoom(), 1 / view.getZoom());
            ctx.drawImage(canvas, -width / 2, -height / 2);
          }
        }
      ]
    });

接下来给这个雷达图设置一个动态的效果,让雷达图不断的扫描。下边的这段代码设置了雷达指针的扫描角度,持续时间:

 new twaver.Animate({
    source: node,
    attr: ‘[email protected]‘,
    from: 0,
    to: Math.PI * 2,
    dur: 4000,
    repeat: Number.POSITIVE_INFINITY,
    reverse: false
  }).play();
}

这样一个简单的雷达动画效果就出来了,是不是很简答,如果对这个效果用兴趣的,可以发邮件索取源代码,附上邮箱:[email protected]

时间: 2024-10-31 02:21:23

TWaver动画之雷达扫描效果的相关文章

使用c++的OpenGL制作动态三维的雷达扫描效果

感谢参考原文-http://bjbsair.com/2020-04-01/tech-info/18506.html vc++ OpenGL制作动态三维的雷达扫描效果,一个在VC++下应用OpenGL技术绘制三维动画的好范例,虽然这个例子挺简单,但可以为你以后使用VC++6.0编写大型的3D图像处理软件 .3D游戏开发打下基础吧. 项目源代码: 部分代码: 程序执截图: 原文地址:https://blog.51cto.com/14744108/2484193

【canvas系列】canvas实现&quot;雷达扫描&quot;效果

今天来讲解"雷达扫描"效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下. 效果图: demo链接: https://win7killer.github.io/can_demo/demo/radar.html ******************************************************************** 这个东西,背景圆,坐标.圆圈都很简单实现,arc结合moveTo.lineTo就可以解决,背景色也不是问题,一句带过. 那么

html 类似雷达扫描效果 及 闪屏效果

//雷达扫描效果 1 <em id="Radar" class="RadarFast"></em> 2 3 css: 4 .RadarFast{ 5 position: absolute; 6 z-index: 10; 7 bottom: 140px; 8 left: 50%; 9 margin-left: -3px; 10 } 11 .RadarFast:after{ 12 content: ''; 13 position: absolut

Android例子源码模仿安卓微信、云播雷达扫描动画效果

本项目是一个模仿Android微信.云播雷达扫描动画效果的小例子,点击中间的黑色圆圈开始扫描动画,再次点击复位,需要这种效果的朋友可以自己下载看一下,因为是动画效果所以截的静态图有点变形,项目编译版本4.4.2默认编码GBK 源码包下载地址以及运行截图. [点击这里]

雷达扫描

转载请注明出入:http://blog.csdn.net/forwardyzk/article/details/42640031 模拟扫描文件的效果,模拟雷达扫描. 思路: 1.使用旋转动画和渐变动画的结合. 2.使用线程和Handler进行消息的传递,刷新界面 不要在主线程上做耗时操作,不要在主线程上刷新界面. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo

Android Shader渲染以及实现水波纹霓虹文字雷达等效果

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Android Shader渲染以及实现水波纹霓虹文字雷达等效果 - lzy的博客 - 博客频道 - CSDN.NET lzy的博客 目录视图 摘要视图 订阅 [活动]2017 CSDN博客专栏评选 &nbsp [5月书讯]流畅的Python,终于等到你!    &a

街机扫描线之为图片添加扫描效果

为图片添加一些额外效果,会使图片更耐看一些,下面来看看如何为一张普通图片添加扫描效果. 首先是下载软件,可到软件主页下载:街机扫描线_v10(正式版) 看一下制作先后的对比图: 原图效果: 制作后加入了扫描效果的效果图: 用街机扫描线制作这种效果图只需简单的几步操作即可完成,貌似用PS做这种效果图也可以做出来,但是会很复杂.下面说一下制作方法. 1.用任意看图软件或浏览器打开一张需要制作扫描效果的图片,也可直接在网页上制作. 2.下载 街机扫描线 之后解压到任意目录,运行 街机扫描线_v10(正

属性动画实现卫星菜单效果

原来学过用自定义控件以及视图动画来达到这个效果.后来根据慕课网的视频,接触到了属性动画,发现其精髓之处不是一点两点. 相信大家都知道,当我们在使用视图(View)动画的时候,改变轨迹时,所触发的点击事件却没有相对应的随之轨迹而改变.确切的说,Animation改变显示的位置,不可以实现交互的效果,只是实现了显示效果. 先看下Animator的介绍 This is the superclass for classes which provide basic support for animatio

[Swift通天遁地]八、媒体与动画-(7)实现多个动画的顺序播放效果

本文将演示使用第三方类库,实现多个动画的顺序播放效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Spring', :git => 'https://github.com/MengTo/Spring.git' 7 end