项目动画处理

1,最少转一圈处理,设置两个全局变量记录最短翻转时间(翻转一圈的时间),另一个变量记录请求是否返回,两者均满足的时候停止动画就达到了控制动画最少翻转一圈的效果。

function getData(){// 获取数据函数
    window.isRes = false;//全局变量是否返回
     window.isEndSmallTime = false;//全局变量最小时间是否结束
    $.getAjax({
        url:‘‘,
        data:{},
        success:function(){
             window.isRes = true;
             if(window.isEndSmallTime && window.isRes){
                   doResult(); // 结果处理(停止动画)
               }
        }
    });
}

       /**
         * 停止翻转最小时间设定
         */
        setSmallRollTime:function(target){
            var me = this;
            var smallTimer = setTimeout(function(){//最短翻转时间 1秒
                window.isEndSmallTime = true;
                if(window.isEndSmallTime && window.isRes){
                    doResult(); // 结果处理(停止动画)
                }
            },1000);

        },

2,光环缩放的效果

@-webkit-keyframes twinkling{   /*光环缩放*/
    0%,100%{
         -webkit-transform:scale(1);
         transform-origin:center;
    }
    50%{
       -webkit-transform:scale(1.4);
      transform-origin:center;
    }
}
.twinkling{
    -webkit-animation:twinkling 2s infinite 0.9s ease-in-out alternate;
    animation:twinkling 2s infinite 0.9s ease-in-out alternate;
}

3,border太粗的情况渐变划线

(1)横向划线

background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.4)), to(rgba(255,255,255,0.4))) left bottom;
    background-size: 100% 0.01rem;
    background-repeat: repeat-x;

(2)竖向划线

background: -webkit-gradient(linear, right top, right bottom, from(rgba(67,31,152,0.4)), to(rgba(67,31,152,0.4))) right bottom;
    background-size:0.01rem 100%;
    background-repeat: repeat-y;

4,设置节点本身颜色(背景色,透明度,字体色等)相关的变量(避免影响子元素)使用rgba()

时间: 2024-10-29 19:08:13

项目动画处理的相关文章

土木er,前端爱好者,写了一些项目动画项目。

这是我的简历 http://resumeclear.applinzi.com/里面有详细的项目说明 本科学的土木,由于实在无法忍受枯燥无味的施工,遂选择从事自己从大学才发现自己非常喜欢的计算机.于是大学跨考过计算机研究生,初试过了,复试被刷,所以迷茫了一年左右. 14-15 年 有心从事计算机,但主要是做一些动画,视频 15-16年 泡了一年图书馆,冲击哈工大计算机 16 年初 复试失败,觉得自己在高考和考研上两度考砸,所决定先混社会.因为在大学时网上自学过前端,所以找了一份学校当地的前端实习.

程序猿必备的10款web前端动画插件一

1.动画SVG框架幻灯片 在幻灯片之间切换时显示动画SVG帧的实验性幻灯片.不同的形状可以用来创建各种风格. 我们想和大家分享一个实验幻灯片.我们的想法是在从一个幻灯片转换到另一张幻灯片时,使SVG帧动画化.使用不同的形状,我们可以在改变SVG路径时创建各种框架样式.这个想法的灵感是基于Dribbble拍摄:06章太平庸.我们使用的是anime.js的动画. 在线演示 源码下载 2.WebGL的背景装饰 使用WebGL显示为背景的装饰形状的集合.这些形状由Three.js创建,并使用TweenM

RecyclerView使用要点

RecyclerView是一种列表容器, 发布很久了, 才想起来写点什么. RecyclerView相比于ListView, 在回收重用时更具有灵活性, 也就是低耦合, 并且提供了扩展. 加载多个视图时, 应该多用RecyclerView代替ListView. 那么我们来看看这东西应该怎么用? 比如生成一个瀑布流的视图. 首先我们从一个HelloWorld写起, 看看如何构建一个RecyclerView. 1. 依赖库 Gradle配置, 添加Recycler库 compile 'com.and

安卓开发必须收藏的网站

Bookmarks 干货链接 Android源码下载 cleopard的资源 - 下载频道 - CSDN.NET 2014年下载频道人气资源大集合,免积分!-CSDN论坛-CSDN.NET-中国最大的IT技术社区 新鲜干货来了 2015年1.2.3.4.5月最热下载资源大集合-CSDN论坛-CSDN.NET-中国最大的IT技术社区 新鲜干货来袭 2015年5月最热资源大集合-CSDN论坛-CSDN.NET-中国最大的IT技术社区 2015年6月下载频道最热资源汇总-CSDN论坛-CSDN.NET

龙之谷手游WebVR技术分享

主要面向Web前端工程师,需要一定Javascript及three.js基础:本文主要分享内容为基于three.js开发WebVR思路及碰到的问题:有兴趣的同学,欢迎跟帖讨论. 目录:一.项目体验1.1.项目简介1.2.功能介绍1.3.游戏体验二.技术方案2.1.为什么使用WebVR2.2.常用的WebVR解决方案2.2.1.Mozilla的A-Frame方案2.2.2.three.js及webvr-polyfill方案三.技术实现3.1.知识储备3.2.实现步骤3.3.工作原理四.技术难点4.

【转】如何入门iOS开发

我反对理由如下:不管是斯坦福大学的CS193p公开课.苹果官方文档.绝大多数市场上庞杂的教学书籍都不是很适合入门同学看,想入门的话应该选用学习成本最低的方法,从最最基本开始讲起,并不是一味的讲解语法与知识,而是一边实践一边学习知识才是最好的学习方法. 并且我想告诉题主,你问的是iOS 开发怎么入门,但是你补充说明里说道的设计模式.内存管理等内容暂时不用你关心,等你真正iOS入门了以后在研究吧.也许我可以这么定义你的问题: 一个略懂编程的人并且完全没有接触过IOS开发的人想要学习IOS开发应如何学

IOS之UIImageView--小实例项目--带音效的拳皇动画

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

iOS项目开发实战——实现视图切换动画

不同界面或者说不同视图之间进行切换是应用程序的一种最常见的动态效果,无论是哪一种平台的项目开发,默认的视图切换往往是十分单调的,没有任何动画的,界面的切换也是非常的突兀.如果说使用动画效果使界面能够活跃起来,那么你的App将会非常动感.这里将实现视图切换过程中的动画效果.具体实现如下: (1)本次试验将拖入2张图片,不直接放到View Controller中,而是在代码中动态加载.拖到Main.storyboard中后目录结构如下: . (2)实现图片与代码Outlet绑定: @IBOutlet

项目中使用动画

1.项目中使用动画可以让产品更具有活力,给产品带来不一样的体验. 2.but,属性动画这个强大的东西没法再项目中直接用,因为他不兼容3.0之前的版本,这个时候就要用NineOldAndroids来代替了 http://nineoldandroids.com/ 3.nineoldandroids兼容了安卓系统实现的所有的属性动画,而且扩展了更多的功能. 4. (1)安卓动画有的已经做了笔记,这里只记录nineoldandroids有的或者是http://www.cnblogs.com/hpustu