草庐IT

动画生成

全部标签

javascript - angular2 组件中的多个动画触发器

我想在一个组件中定义多个动画触发器。这可能吗?例如一个用于进入场景,一个用于悬停。还是我需要为这种情况定义两个组件(父子)?item.compoennt.ts//removedtheimportandclasspartforbetterreadability@Component({selector:'item',templateUrl:'./item.template.html',styleUrls:['./item.style.scss'],animations:[//pageloadanimationtrigger('slideIn',[state('in',style({opac

javascript - 动画渐变颜色 React Native

我正在尝试在ReactNative中创建一个渐变,该渐变将在应用程序打开时以一种颜色开始,然后每30秒逐渐变为另一种颜色。常规线性渐变在不尝试添加动画的情况下工作。我尝试使用插值和动画计时,如ReactNative文档中所示,但似乎没有任何效果。我的代码:importReact,{Component}from'react';import{processColor,AppRegistry,StyleSheet,Dimensions,Animated,Image,Easing,View}from'react-native';importTimerMixinfrom'react-timer-

javascript - 如何使用 `ArrayBuffer` 从 `bytes` 生成 `js_of_ocaml`

我正在构建一个在Ocaml中实现并使用js_of_ocaml编译为JavaScript的JavaScript库.我的一个Ocaml函数返回一个带有二进制数据的string。我如何使用js_of_ocaml作为ArrayBuffer公开它? 最佳答案 当您编译为javascript时,在string中操作二进制数据非常容易出错!根本原因是js_of_ocaml的选择有问题:因为javascript字符串以UTF16编码,而OCaml字符串(隐式)以UTF8编码,js_of_ocaml尝试在两者之间导航。因此,当它遇到代码为>127的“

Javascript 生成器问题 - 解释这段代码

我正在阅读FlavioScopes的“TheJavaScriptHandbook”。他介绍了生成器的概念。function*calculator(input){vardoubleThat=2*(yield(input/2))varanother=yield(doubleThat)return(input*doubleThat*another)}//Hethenrunsthefollowingcodeconstcalc=calculator(10)console.log(calc.next())输出{value:5,done:false}calc.next(7);输出:{value:14

javascript - 有什么方法可以检测 Swiffy 动画何时完成?

Swiffy动画完成后会触发事件吗?或者是否有一种方法可以获取当前帧与总帧数?我尝试按照另一篇StackOverflow帖子中提到的那样去压缩runtime.js,但我无法破译它。 最佳答案 对于看到这篇文章的任何人,我找到了解决方案。我最终在我的FLA结束时使用了getURL()调用。它看起来像这样:getURL("javascript:animationIsComplete();");将您想要的任何内容放入animationIsComplete()函数中,它现在将在Swiffy动画结束时触发。

javascript - jquery 动画一个 div 到中心

html:cartagena我想要做的是使用Jquery将“动画”div移动到中心。我现在的js:$(document).ready(function(){$("#animate").animate({left:"+=512"},2000);});现在我想把它放在中心,而不是右边512像素处。 最佳答案 我假设#animate的位置是absolute。要使元素在其父元素中居中,只需将其父元素宽度的一半减去其自身宽度的一半添加到left:$("#animate").animate({left:$("#animate").parent(

javascript - 如何使用 d3.js 沿 GeoJSON 路径为对象设置动画?

我正在使用D3.js从GeoJSON文件生成和呈现路径。这工作正常,但现在我想沿着那条路径为一个对象设置动画。我知道如何使用D3和标准SVG来做到这一点:创建一个过渡并设置其持续时间对于转换的每一帧,使用%complete找到沿路径的坐标将对象移动到第2步中找到的坐标这很简单。但我遇到的问题是d3.geo.path()似乎不像标准D3路径对象(例如有用的getPointAtLength()方法)那样返回任何长度或位置数据。所以我无法找到某个点的x、y坐标,比如说,沿着路径的25%。有没有办法获取这些数据?(或者是否有更好的方法,例如将d3.geo.path()转换为常规D3路径?)下面

javascript - 检测在不可见和在视口(viewport)外时是否对canvas/css3动画进行了优化

我假设使用HTML5中的所有这些硬件加速动画,实际上不会渲染在视口(viewport)之外运行的动画。我希望能够检测到是否正在发生。我尝试在每秒移动100px的对象上循环使用webkitCSSMatrix来尝试确定每个刻度线移动了多少像素,但是如果我将动画移出视线则没有区别。有任何想法吗? 最佳答案 您可以使用单独的计时器测试来查看伪经验方面在外部和内部绘制的对象之间的差异(计时器实际上并不能证明任何东西,但可以为您提供强大的indisium)。但是,了解Canvas的工作原理也可以为您提供坚实的指导。例如,Canvas是一个简单的

javascript - jQuery/CSS 动画 div 从左到右的宽度

我正在尝试使用jQuery为div设置动画,背景图片的宽度从左到右逐渐减小,同时绝对定位。我需要使其与IE8兼容,因此使用jQuery。这是一个基本的JSFiddle演示链接,包含我目前所拥有的内容,但它是从右到左动画的:JSFiddlelinkjQuery(document).ready(function($){$(document).on('click','.splat',function(e){$(this).animate({width:"0px"},800);});});.splat{width:400px;height:400px;background:blue;posit

javascript - 如何识别 ES6 生成器

假设我有一个这样的生成器函数:varg=function*(){yield1;yield2;yield3;};vargen=g();我如何以编程方式判断g是一个生成器函数,或者gen是一个迭代器?这似乎是一种可能性:g.constructor.name==='GeneratorFunction'有没有更好的办法?更新:我结束了takinganapproach类似于Eric'sanswer,但使用eval首先确定目标平台是否支持生成器。这是实现:varGeneratorConstructor=(function(){try{vargenerator;returneval('generat