animate | 易学教程

如何为约束更改设置动画？

阅读更多关于如何为约束更改设置动画？

问题： I'm updating an old app with an AdBannerView and when there is no ad, it slides off screen. 我正在使用 AdBannerView 更新一个旧应用，当没有广告时，它会滑出屏幕。 When there is an ad it slides on screen. 出现广告时，它会在屏幕上滑动。 Basic stuff. 基本的东西。 Old style, I set the frame in an animation block. 旧样式，我将帧设置在动画块中。 New style, I have a IBOutlet to the auto-layout constraint which determines the Y position, in this case it's distance from the bottom of the superview, and modify the constant: 新样式，我对自动布局约束有一个 IBOutlet ，它确定Y位置，在这种情况下，它是距父视图底部的距离，并修改常量： - (void)moveBannerOffScreen { [UIView animateWithDuration:5 animations:^{

移动端吸顶导航组件的实现

阅读更多关于移动端吸顶导航组件的实现

前言吸顶导航是营销会场类最常用的组件之一，现在的会场页面是越来越长，如果从第一屏手动滑到最后一屏，还是一个挺累的操作，所以吸顶导航还是很有必要存在的，组件很常见，但是开源的不多，而且大多是PC版，几乎都不能满足业务的需求，所以决定自己写一个。先看下组件效果 demo 功能拆解梳理下组件需要实现的功能到达首层吸顶和最后一层取消吸顶当前楼层高亮显示选中导航居中显示默认显示或滑到首层才显示滑动过程中控制隐藏显示展开显示更多功能实现下面我会介绍下其中几个功能的实现方法，全部源码有兴趣的话可以点击这里导航选中居中 1. 如何居中首先我们可以先考虑怎么居左，我们知道每一项距离左边的宽度是 m ，那居左就是 -m ,居中就是再减中线的位置，中线的位置如果是 M ，那就是 M-m 。 2. 处理边界的情况通过 M-m ，我们再来处理到达边界的问题，主要两种情况 1.当M-m>0的时候，则已经到达最左边 2.当M-m >于可滚动的距离（滚动条长度-可视长度），就是到达最右边实现代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 /*以下代码为了方便理解，略有删减*/ /* * 导航切换 */ watch(){ translateX

关于H5实现微信长按图片拖动调整顺序

阅读更多关于关于H5实现微信长按图片拖动调整顺序

当你明白功能的实现逻辑的时候，往往实现的过程中会给你带来惊喜，所以先去明确功能的实现逻辑，剩下的事情会水到渠成比如这个功能，开始的时候我是这样想的，第一张图片的左侧中点作为左侧触发边界点，右侧中点作为右侧触发边界点，当第一张图片的右侧边界点拖动到第二张图片的右半部分时，将第二张图片移动到左边，并交换两张图片的index和位置。当第二张图片的左侧边界点拖动到第一张图片的左半部分时，将第一张图片移动到右边，并较远两张图片的index和位置。但是实现后发现只能拖动一次，就是左边的拖到右边，右边的拖动到左边，出现第三张图片的时候就不行了，还有个问题就是拖动第一张图片到右边第二张图片移动到左边后，这时候拖动还没完成，再把第一张图片托回去后，移动到左边的第二张图片并不会回去。然后又想了想分别针对每张图片设置触发区间，当一张图片拖动时触发这些区间后移动，做着做着感觉做不动了。然后又看了看微信的操作，发现是以每张图片的中心点做参考的，当你拖动一张图片的时候，其他图片的中心点就作为触发点，当其他图片的中心点处在拖动的图片内的时候把触发的图片和当前拖动的图片的index和位置互换。这样不考虑index顺序，当前拖动图片被动触发才是正确的思路效果如下代码如下，插入的图片元素需要有class和moveindex，插入后执行press函数，代码需要修改对应的图片class

Jquery如何使用animation动画效果改变背景色

阅读更多关于 Jquery如何使用animation动画效果改变背景色

Jquery如何使用animation动画效果改变背景色一、问题引入 jquery的animate动画虽然强大，但是无法使用其进行背景色(background-color)的动画效果变化，因为animate动画效果只能动态改变数值型的参数，例如：top，left，width，height...等等好像网上也有说要装一个 "jquery.ui" 的插件之类的。但是博主我实在不想引入过多的插件，且恰好本人掌握的CSS比较好一点点，所以就想了下面这么个法子。但好在 CSS 它自带的animation动画效果更加强大，它可以为我们提供背景色的动态变化。所以我们可以利用 Js+CSS 的方法达成我们预期效果。二、demo展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery无法通过animate动画改变背景色</title> <style type="text/css"> #btn{ display: block; width:100px; margin:50px auto 0px; font:bold 30px/50px 'Microsoft Yahei'; background-color: lightblue; } .box{ margin:100px auto 0px;

vue里面使用Velocity.js

阅读更多关于 vue里面使用Velocity.js

英文文档： http://velocityjs.org/ https://github.com/julianshapiro/velocity 中文手册（教程）： http://www.mrfront.com/docs/velocity.js/ velocity.js 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和 $.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能，还拥有：颜色动画、转换动画 (transforms)、循环、缓动、 SVG 动画、和滚动动画等特色功能。它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。 Velocity 目前已被数以千计的公司使用在自己的项目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，这里 Libscore.com 统计了哪些站点正使用 velocity.js。 Vue中如何使用：安装 npm install velocity-animate@beta 页面引入：

现代都市风移动端可折叠导航菜单

阅读更多关于现代都市风移动端可折叠导航菜单

效果图 index.html <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > index </ title > < link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Open+Sans:400,700" > < link rel ="stylesheet" href ="css/style.css" > </ head > < body > < div class ="htmleaf-container" > < div id ="wrapper" >  < div class ="menu" > < img id ="menu-bg" src ="images/golden-gate-lights.jpg" /> < ul > < li >< a href ="" > About </ a ></ li > < li >< a href ="" > Share </ a ></ li > < li >< a href ="" > Activity </ a ></ li > < li >< a href ="" > Settings </ a ></

leaflet 地图操作(缩放、平移、定位/书签、动画)

阅读更多关于 leaflet 地图操作(缩放、平移、定位/书签、动画)

map.setZoom(10, { // animate: false }) //设置地图缩放到 map.zoomIn() //图层往里进一个图层，放大 map.zoomOut() //图层往里出一个图层，缩小 map.panTo([37.91082, 128.73583], { animate: true }) //地图平移，默认就是true， map.flyTo([36.52, 120.31]); // 点到点的抛物线动画，平移加缩放动画 //尽量避免 setZoom()等地图缩放方法与 flyTo、flyToBounds 一起合用，因为这两类地图操作方法都有各自的缩放值， //造成动画不流畅、不能定位到目的点。 let polygon = L.polygon( [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], [40.774, -74.125], { color: 'green', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map); //地图上绘制一个多形 map.flyToBounds(polygon.getBounds()); //getBounds（获取边界）：返回地图视图的经纬度边界。 //飞到这个多变形区域上面，自动判断区域块的大小

自制 h5 音乐播放器可搜索

阅读更多关于自制 h5 音乐播放器可搜索

博客地址： https://ainyi.com/59 闲言碎语：有好几天没有发表博客了，这也是因为一直开发音乐和完善我的博客项目，好不容易抽出时间总结一下这几天所做的东西，还这么多课，实则匆忙今天难得逃了一次课，就趁这时间，该写写就写写吧~~ 进入正题：Lily_music 本次开发，参照本人之前所做的乐诗博客（文末会说到）的相关播放控制等功能，继续优化的结果。前端模仿qq音乐界面，然后在此之上进行修改的界面，并使用了一点 es6 的语法话说个人挺喜欢qq音乐界面的，简洁，当然也少不了背景模糊插件以及滚动条美化相关插件，也用到了弹窗、点击复制歌曲链接和歌词链接相关功能，但是目前歌曲分享功能暂未实现、后续.... 致谢：歌曲搜索参照某位大佬封装的 qq 音乐的 api，UI 界面参照另一位大神的一些解决方案，在此表示感谢相关链接：那么相关使用的开源插件有： jQuery官方类库： https://jquery.com/ layer弹窗插件： http://layer.layui.com/ 复制粘贴库插件： https://www.npmjs.com/package/clipboard-js mCustomScrollbar滚动条美化插件： http://manos.malihu.gr/jquery-custom-content-scroller/

jquery如何实现动态增加选择框

阅读更多关于 jquery如何实现动态增加选择框

jquery如何实现动态增加选择框一、总结一句话总结：用jquery的clone(true)方法。 1、如何在页面中复制amazeui加了特效的标签？ amazeui中的控件带js方法，不知道那部分js的情况下，只有不用功能才能方便用clone(true)复制 2、选兄弟选不到的时候怎么选元素？通过父亲选儿子，照样可以达到相同的功能 3、表单中的控件如何让它不能提交过去？控件设置为disabled 二、jquery如何实现动态增加选择框 1 <script> 2 function taskRewardHidden(){ 3 $('div.goods' ).hide(); 4 $('div.goods').find($('select')).attr({'disabled':'disabled' }); 5 $('div.attribute' ).hide(); 6 $('div.attribute').find($('select')).attr({'disabled':'disabled' }); 7 } 8 taskRewardHidden(); 9 $('div.attribute' ).show(); 10 $('div.attribute').find($('select')).removeAttr('disabled' ); 11 12 //

cesium 实现风场图效果(附源码下载)

阅读更多关于 cesium 实现风场图效果(附源码下载)

前言 cesium 官网的api文档介绍地址 cesium官网api ，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子： cesium 官网在线例子，这个也是学习 cesium 的好素材。内容概览 1.基于cesium 实现风场图效果 2.源代码 demo 下载本篇实现 cesium 风场图功能，效果图如下：实现思路：场数据源获取：天气数据由全球预报系统（GFS）生成，由美国国家气象局管理。预测每天产生四次，并可用于从NOMADS下载。这些文件位于GRIB2 格式并包含超过300条记录。我们只需要这些记录中的一小部分就可以在特定的等压线上可视化风资料。下面的命令下载 1000 hPa风向量，并使用 grib2json 将它们转换为JSON格式。屏幕上生成一系列随机粒子位置并绘制粒子对于每一个粒子，查询风数据以获得其当前位置的粒子速度，并相应地移动它将一小部分粒子重置为一个随机的位置。这就确保了风从不会变成空的区域淡出当前屏幕，并在顶部绘制新定位的粒子核心代码风场图初始化调用 function Draw() { $.ajax({ type: "get" , url: "sampledata/wind/gfs20171227.json", // 请求风场数据源json dataType: "json" , success:

订阅 animate