天道酬勤,学无止境

animation

Text transition/animation onclick in javascript function and HTML

问题 我有一个按钮在点击时触发此功能: <button onclick="showAdvice()">Advice!</button> <p id="text"></p> <script> function showAdvice() { var advices = ["1","2","3"]; var choose = Math.floor(Math.random() * advices.length); document.getElementById("text").innerHTML = advices[choose]; } </script> onclick动作在“文本”段落中生成建议,它们以随机顺序出现。 我希望它们之间有一个过渡 - 不透明度,淡出/淡入。我怎样才能在 CSS/JavaScript 中实现这一点? 回答1 回答2 您可以使用 jquery 创建动画。 function showAdvice() { $("#text").hide(); var advices = ["1", "2", "3"]; var choose = Math.floor(Math.random() * advices.length); document.getElementById("text").innerHTML = advices[choose]; $("#text")

2022-07-11 09:47:51    分类:技术分享    javascript   html   animation   text   transition

React-Native ListView row animation on the y axis

问题 在我的 ListView 中为 y 轴上的行设置动画时遇到了一些麻烦。 x轴很好,y轴不行。 这是我正在做的精简版:风格: var animateStyle = {transform:[{translateX: this.state.position.x, translateY: this.state.position.y}]} 动画视图: <Animated.View ref={(row) => main[userId] = row} style={[animateStyle]}> <TouchableHighlight onPress={() => this._move()}> <Text>hello</Text> </TouchableHighlight> </Animated.View> 下面的示例设置 x 值并完美地移动行,但如果您切换值以在 y 轴上设置动画,则不会发生任何事情。 _move: function() { var newValue = this.state.position.x._value+1; this.state.position.x.setValue(newValue); var thisUserComponent = this.props.main[this.props.user.id]; thisUserComponent.refs

2022-07-11 09:46:25    分类:技术分享    listview   animation   react-native

Swing animation pause and resume

问题 我想增加暂停/恢复游戏的可能性。 不幸的是,我的解决方案只暂停了游戏,但没有恢复它(当我点击恢复按钮时没有任何反应 - 图像仍然存在)。 我还尝试在thread上调用 wait/notify 方法,但它也不起作用 - 我Exception in thread "AWT-EventQueue-0" java.lang.IllegalMonitorStateException 。 暂停/恢复的最佳解决方案是什么? 游戏循环 public void run() { init(); long startTime; long reTime; long waitTime; while (running) { startTime = System.nanoTime(); int CarPosX = car.zwrocPolozenieX(); int CarPosY = car.zwrocPolozenieY(); update(b, CarPosX, CarPosY); render(b); //draw(); repaint(); if(b<4390) { b=b+szybkoscMapy; } reTime = System.nanoTime() - startTime; waitTime = targetTime - reTime/100000000; try { Thread

2022-07-11 09:38:34    分类:技术分享    java   swing   animation   game-loop

Why is my gif missing png files after 753 iterations

问题 import imageio import os filenames =[] dirPath = "D:\\BandSim_2017-06-20_12_00_45\\" for file in os.listdir(dirPath): if file.endswith(".png"): filenames.append(dirPath+file) moviePath ="D:\\simulation.gif" with imageio.get_writer(moviePath,mode='I', duration=0.1) as writer: i=0 for filename in filenames: image = imageio.imread(filename) writer.append_data(image) print filename

2022-05-17 05:15:06    分类:技术分享    python-2.7   animation   gif   animated-gif   python-imageio

CABasicAnimation on CAShapeLayer not working for path change

问题 我这里有一个进度方法: func progress(incremented : CGFloat){ if incremented <= self.bounds.width{ self.progressLayer.removeFromSuperlayer() let originBezierPathProg = UIBezierPath(roundedRect: CGRect(x:0, y:0, width:0, height:self.bounds.height) , cornerRadius: self.viewCornerRadius) originBezierPathProg.close() let newBezierPathProg = UIBezierPath(roundedRect: CGRect(x:0, y:0, width:incremented, height:self.bounds.height) , cornerRadius: self.viewCornerRadius) bezierPathProg.close() self.progressLayer.path = originBezierPathProg.cgPath self.borderLayer.addSublayer(self.progressLayer) let animation =

2022-05-16 22:42:08    分类:技术分享    ios   swift   animation

CSS animated Stripes issue

问题 我在下面有 2 个代码片段。 首先,我有漂亮的条纹,它们根据窗口大小调整自己的大小并且总是居中(我尝试了一些动画,但我没有像片段 2 中的动画那样得到它) 但我需要一个动画,这个动画显示在第二个片段中,条纹应该从下面开始向上,我想把它保留在最终结果中。 所以我需要融合第一个和第二个片段。 第一的: html, body { width: 100%; height: 100%; margin: 0; padding: 0; #position: fixed; } .mask { height: 100%; overflow: hidden; position: relative; } .container { height: 100%; margin: 0 -100vh; #position: absolute; } .stripe { float: left; height: 100%; width: 2%; margin: 0 1%; bottom: 0%; max-height: 0%; #position: absolute; background-color: black; transform: skew(-20deg); #transform-origin: bottom bottom; #transform-origin: left bottom

2022-05-16 16:48:09    分类:技术分享    html   css   animation   css-animations

(python) matplotlib animation doesn't show

问题 我基于matplotlib站点示例编写了以下代码。 import numpy as np import matplotlib.pyplot as plt import matplotlib.animation as animation fig = plt.figure() nFreqs = 1024 nFFTWindows = 512 viewport = np.ones((nFreqs, nFFTWindows)) im = plt.imshow(viewport, animated=True) def updatefig(*args): global viewport print viewport viewport = np.roll(viewport, -1, axis=1) viewport[:, -1] = 0 im.set_array(viewport) return im, ani = animation.FuncAnimation(fig, updatefig, interval=50, blit=True) plt.show() 在更改动画作品之前,但现在没有。 我希望它以紫色情节开始,从右边到左边慢慢变成黄色。 viewport变量确实更新正确(在我的函数中使用print检查它)。 我得到了静态图像(所有图像,就像最初一样): 我在这里哪里做错了? 回答1

2022-05-16 15:49:03    分类:技术分享    python   animation   matplotlib

javaFX:move shapes with absolute coordinates using translatetransition

问题 我正在使用 javaFX 实现合并排序动画。 我想使用绝对坐标来移动形状。 我使用 Translatetransition() 的setToX()和setToY() Translatetransition() 。 但是,这些形状位于具有固定间距的 HBox 中。 我尝试将它们移动到不同的地方,但它不起作用。 setToX()和setToY()使用 HBox 作为参考。 形状始终具有固定的间距,并且形状的顺序不会改变。 我使用getLayoutX()和getLayoutY()来获取绝对坐标。 谁能帮我?? 这些是相关代码: HBox hBox = new HBox(20); hBox.setAlignment(Pos.CENTER); hBox.setPadding(new Insets(0,0,0,0)); ArrayList<StackPane> list = new ArrayList<>(); Random random = new Random(5); for (int i = 0; i < 12; i++) { int num = random.nextInt(10); Rectangle rectangle = new Rectangle(40, (num * 10) + 50); rectangle.setFill(Color.valueOf("#0000FF"

2022-05-16 12:58:05    分类:技术分享    java   sorting   animation   javafx

CSS Animation - Grow from center (Zoom from center dot to full container)

问题 我正在开发一款游戏,我想为一些盒子制作动画。 我想要一个盒子从小开始,然后向外生长,所有边缘同时生长,效果看起来像是从中心向外生长。 到目前为止,我拥有的最好的动画如下:它根据需要增加盒子的高度和宽度,但从左侧和顶部开始。 我希望它从一个中心点开始。 我查看了 W3 上的动画属性,似乎没有什么适合这艘船。 .box_2_gen{ animation-duration: 0.25s; animation-name: createBox; position: relative; background: #FFEDAD; border: black solid; border-width: 1px; border-radius: 15px; width: 98px; height: 98px; margin: 10px; float: left; } @keyframes createBox{ from{ height:0px; width: 0px; } to{ height: 98px; width: 98px; } } 编辑:我的问题可能看起来像另一个类似的问题,但我只是想知道如何只使用关键帧来做到这一点。 谢谢, 回答1 您应该在动画中使用transform以获得更好的性能和更多的控制。 这样您就不必重复静态px值,并且可以使用transform

2022-05-16 07:46:09    分类:技术分享    css   animation   css-transforms

Activity transition when data changes

问题 我得到了图像适配器,其中每个项目都是用户图像,单击它会打开一个带有所选用户图像的新活动,因此我将图像标记为共享元素并使用活动转换。 我对第二个活动执行的部分操作会影响所有用户,因此适配器调用notifyDataSetChanged并将位置重置为列表顶部。 当发生这种情况时,它会弄乱返回动画,当我关闭第二个活动并返回列表时,其中的数据已更改,因此图像被动画到错误的单元格。 我有两个问题: 我该怎么做才能将动画重新映射到正确的单元格? 所有单元格都有相同的共享ID... 如果我的用户在列表中不再可见,如何用不同的动画替换返回动画? 回答1 我该怎么做才能将动画重新映射到正确的单元格? 所有单元格都有相同的共享 ID。 在第一个活动中,您应该有一些键来指定启动第二个活动的项目。 假设您有一个唯一的userId和User的Map ,即Map<Integer, User> 。 当您启动第二个活动时,在地图中传递这个User的键,假设它是42 。 (在地图42 -> John Doe中,您正在为John Doe启动第二个活动)。 setExitSharedElementCallback() 在第一个活动中并覆盖onMapSharedElements() 。 override fun onMapSharedElements(names: MutableList<String>

2022-05-16 05:43:28    分类:技术分享    java   android   animation   android-animation   activity-transition