关键词：
新年好，首先给大家发个红包。
[意念红包]请闭上眼睛通过念力领取。
这都2017年了，是时候来一波基础特效教程了！
如果我不偷懒的话，或许可以成为一个系列都基础教程哦。当然如果成为了一个系列，这个系列就像标题说的一样，是基础特效。所以内容会比较简单，如果你是老司机的话，可以直接飘过了(顺便带我上车！)。
本次项目地址：https://github.com/githubwing/WingUE
这次依然拿饿了么开刀。来庖丁一个搜索栏过度效果，如下图：
额，图片还是比较大的，为了不浪费排版空间，这次就不上饿了么原图了，直接上效果图。效果还是差不多的哈。
如你所见，这是一个过度效果。 用一个群友的话来说就是丝滑过度根本看不出来是两个Activity。
一个Activity还是两个？
这是两个Activity，看起来顺化的原因是使用了一种叫做共享元素的概念。Android 5.0自带共享元素的实现，但是有一些缺点比如：不能改变大小， 不能兼容4.X 等等。
如何实现？
其实本次的效果在高仿微信下滑返回PhotoView中有运用以及介绍。但是由于篇幅没有做详细的介绍，现在就向大家介绍实现这种效果的思路。
首先既然叫做共享元素，那么可想而知肯定有两个Activity拥有一项共同的元素，可能是图片、一个TextView、一个EditText等等。如效果图，他就是共享一整个EditText。准确地说是一个组成看似EditText的元素组。
为了实现这个效果，我们需要在两个Activity中都放置同样的搜索栏元素。
<FrameLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#0096FF"
android:padding="10dp">
<TextView
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="广东省广州市番禺区"
android:textColor="#fff"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_search_bg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/ele_search_bg"
android:gravity="center"
android:padding="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="搜索商家、商品名称" />
<TextView
android:gravity="center"
android:textColor="#fff"
android:text="烧烤 螺蛳粉 火锅 巴掌 麦当劳 冒菜 臭豆腐 云吞面 "
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
现在我们两个Activity都有这个元素了。接下来要做的只有一步：那就是startActivity。
哈哈，我真的没有逗你，因为其实所有你看到的动画都是在第二个Activity完成的。由效果图可以看到，在动画执行的过程中还是可以看到前一个Activity的，所以我们需要对第二个Activity进行特殊的“透明处理”。
在style.xml里面新增加一个透明的主题，并且应用给第二个Activity。
<style name="Translucent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
接下来，只要在第二个Activity打开的时候，进行一些动画即可。所以首先我们要把第一个Activity中元素的坐标传给第二个Activity。
Intent intent = new Intent(EleActivity.this,EleSearchActivity.class);
int location[] = new int[2];
mSearchBGTxt.getLocationOnScreen(location);
intent.putExtra("x",location[0]);
intent.putExtra("y",location[1]);
startActivity(intent);
overridePendingTransition(0,0);
注意这里拿到的是在屏幕中的坐标。所以在第二个Activity中，获取第二个元素的坐标也要用屏幕中的坐标。
拿到之后，再根据两个坐标的差值进行平移操作，这样位移起来就完全不需要考虑其他坐标系了。至于为什么，留个作业(斜眼)：
float originY = getIntent().getIntExtra("y", 0);
int location[] = new int[2];
mSearchBGTxt.getLocationOnScreen(location);
float translateY = originY - (float) location[1];
如果你想要预览位置效果，可以直接view.setTranslateY(translateY);
接下来动画只要交给ValueAnimator,在这里把搜索栏的背景单独抽成一个View，用来进行X缩放操作。所以现在要做的动画有：
- 左侧箭头的Y轴平移动画。
- 右侧搜索的Y轴平移动画。
- 中间文字以及背景的Y轴平移动画。
- 中间背景的X缩放动画。
- 下部View内容的透明动画。
translateVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator)
mSearchBGTxt.setY((Float) valueAnimator.getAnimatedValue());
mArrowImg.setY(mSearchBGTxt.getY() + (mSearchBGTxt.getHeight() - mArrowImg.getHeight()) / 2);
mHintTxt.setY(mSearchBGTxt.getY() + (mSearchBGTxt.getHeight() - mHintTxt.getHeight()) / 2);
mSearchTxt.setY(mSearchBGTxt.getY() + (mSearchBGTxt.getHeight() - mSearchTxt.getHeight()) / 2);
);
等动画执行完毕以后，只需要将View正确归为即可！
当然返回的时候，只需要往相反的地方做动画~ 另外还需要特别注意的地方有，在启动或者关闭Activity的时候，需要调用下面的代码来关闭切换动画来保证效果。
overridePendingTransition(0, 0);感觉这次效果虽然简单，但是应用场景还是挺广得。
本次项目地址：https://github.com/githubwing/WingUE
如果你喜欢 欢迎Star，也可以加入我的Android酒馆：425983695
参考文章: 低版本实现共享元素动画
饿了么vue实现学习笔记
技术栈：vue2+vuex+vue-router+webpack+ES6/7+fetch+sass+flex+svg以功能实现着手学习1.定位功能home.vue 通过跨域获取当前的地理位置 http://cangdu.org:8001/v1/cities?type=guess2.选择城市转跳页面到搜索详细地址home.vue 根据API接口的ID，通过 router-link:to=... 查看详情
饿了么顶部搜索框下拉动画小效果
效果描述：当下拉的时候渐变产生对固定的搜索框importReact,{Component}from"react";import{connect}from"react-redux";import{Container,Header,Title,Content,Button,Icon,Left,Right,Body,FlatList,}from"native-base";import{Dimension 查看详情
支付宝饿了吗怎么删除订单(支付宝饿了吗怎么删除历史订单怎么删除)
支付宝饿了么里的订单是可以删除的，具体操作如下：演示所用支付宝版本为10.2.961、打开支付宝以后，点开上方的搜索框。2、在输入框输入“饿了么”，等待自动搜索结束后，点击“饿了么”。3、点击打开小程序“饿了么”... 查看详情
饿了么购物车动画(代码片段)
前言之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画，所以想看看别人是怎么实现的，但是看了很多仿饿了么的demo都是实现了一个完整的大的项目，要找到那个小模块很麻烦，所以自己将联动菜单和动画提取出来... 查看详情
前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版
...、有图和评价三个模块3.商家信息页面主要介绍一些商家基本信息，可以通过better-scroll插件，进行左右滑动图片。效果预览：再说一篇，是饿了么的翻版。 查看详情
饿了么商家版登录显示开店信息
...是自动显示的。开店步骤如下：1、在软件商店里搜索“饿了么商家版”，然后点击“安装”。2、进入饿了么商家版点击右上角的“我要开店”。3、这时需注意查看要准备的资料，如果确保自己都已经准备好后则点击下面“准备... 查看详情
这种情况怎么办，饿了么app跳出来的框都不在原来的位置
参考技术A直接百度浏览器或搜狗搜索饿了么送餐员app网页上扫码下载如果是苹果手机直接在appstore上面下载或者在iTunes上面搜索名字下就可以了。安卓手机去应用商店搜索名字下载，比如百度手机助手，豌豆荚等。 查看详情
饿了么表格二次封装具名插槽append的分装实现
1）在封装组件中使用table具名插槽,并自定义具名插槽，对外开发使用:commonTable<template><divclass="common-table-style"><el-table:data="tableData"tooltip-effect="dark"borderhighlight-current-row:max-height="maxHeight" 查看详情
饿了么店铺显示筛选类目无结果
...下是否在自己的营业时段内，如果依然搜索不到，可以像饿了么客服反映情况，或者换一个手机试试。 查看详情
css实现动画特效导航栏(代码片段)
...过时，实现了一种动态百叶窗效果。2实现细节2-0导航栏基本架构 首先复习导航栏的基本架构，导航栏的实现，采用的是ul-li的结构，为了能够实现导航效果，可以在li内部增加一个a标签。 实现导航栏结构的html代码如下... 查看详情
饿了么全链路压测平台的实现与原理
背景在上篇文章中，我们曾介绍过饿了么的全链路压测的探索与实践，重点是业务模型的梳理与数据模型的构建，在形成脚本之后需要人工触发执行并分析数据和排查问题，整个过程实践下来主要还存在以下问题：测试成本较高... 查看详情
饿了么android版下拉筛选效果是如何实现的呢
参考技术A对两个按钮的背景进行改变button、button2的选中和为选择状态.beijing1).drawable.setBackgroundResource(R，让后再button1和button2的点击事件中，分别为button1的选中和为选择状态;上面是改变按钮背景的代码可以做两组图片 查看详情
饿了么ui下拉框禁用
1饿了么ui下拉框可以禁用。2通常可以通过设置下拉框的属性或者使用JavaScript代码来禁用下拉框。禁用下拉框可以防止用户进行选择或者输入操作，可以用于一些特定的场景，比如下拉框的值需要根据其他条件进行计算或者筛选... 查看详情
用vue制作饿了么首页
...网页，实现原则是将他们分块，然后各个击破。很明显的饿了么首页分为三个部分（组件）， 上面的头部（商家信息）， 中间路由 购物车每部分先占住自己位置，然后挨个将这三部分分别实现完整。我... 查看详情
仿饿了么首页导航栏（viewpager）
1、需求分析在饿了么首页中我们能看到这样的布局（如下图）。红框内是一个可以左右滑动的页面，每一个页面类似于九宫格，都有可供点击图标。对于这样的布局，我在网上找了很久都没有找到相关的名称，所以我这里暂时... 查看详情
仿饿了么购物车下单效果
仿饿了么购物车下单效果前一段由于新项目需要，开发一个类似饿了么购物车下单效果，电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。效果图如下:主要的功能：就是左侧展示分类，右侧展示分类下商品的，... 查看详情
饿了么面试经验总结
目录一轮技术面第二个项目：三轮技术面HR面一轮技术面1.简历上写第一位的项目的具体实现思路答案：第一个项目：是数据库课程设计的大作业，是自己和另外一个同学组多完成的，自己主要负责后台代码的编写，主要涉及到... 查看详情
徐州外卖送餐员待遇，饿了么，百度，美团。哪个待遇好？
...实最主要的是百度外卖是由系统派单，不存在人为因素！基本上都能跑20-25单一天。饿了么跟美团，有的地方没单子，有的地方单子多的要命，还不允许拒绝订单，超时罚款，百度不罚款是要你超时不超过45分钟不扣你一分钱。... 查看详情