Contexte
La conception d'interfaces mobiles est tellement en vogue aujourd'hui. Les spécifications de conception et les langages de conception de divers grands fabricants sont très matures. Nous voulons faire des expériences et des innovations en dehors de cette spécification de conception mature, donc c'est différent de l'interaction traditionnelle des bannières. La forme a devenir notre objectif.
concept design
En raison de l'espace de mise en page limité de l'application, en plus de l'orientation fonctionnelle, des habitudes de lecture et du beau design, Ziru souhaite faire différentes tentatives de conception sous le cadre donné, même si ce type de tentative ne peut améliorer la perception de l'utilisateur que de 1 %. Vous avez peut-être loué une maison à Ziroom pendant quelques années et utilisé l'application Ziroom pendant quelques années, et vous ne remarquerez peut-être pas certains petits détails. Mais si un jour, en tant qu'utilisateur, vous découvrez soudainement cet "œuf de Pâques" caché et voyez les intentions de Ziroom dans ces petits détails, je pense que ce jour-là, vous aurez une compréhension et une compréhension plus profondes de la marque Ziroom.
La technologie 3D sans lunettes est généralement utilisée dans des scénarios courants tels que le grand écran 3D à l'œil nu, la projection holographique, etc. Il s'agit en effet d'une toute nouvelle tentative de l'appliquer sur la bannière de l'APP. En utilisant le capteur sur l'appareil mobile, ainsi que sa propre clarté d'affichage et sa propre présentation d'image, nous convertissons l'image 2D en un effet de profondeur de champ pour présenter un effet 3D qui peut être vu sans lunettes "3D".
Méthode pour réaliser
Ce qui suit prend Android comme exemple pour introduire la mise en œuvre de cet effet.
Couches
En fait, la bannière de l'application Ziroom n'a cessé d'innover. Les étudiants qui y ont prêté attention savent peut-être que l'application Ziroom a en fait réalisé une superposition devant l'effet 3D à l'œil nu. A cette époque, afin d'obtenir un plus effet de commutation naturel et délicat : dans chaque Lorsqu'une bannière glisse vers l'intérieur et vers l'extérieur, le bas s'estompe réellement sur place, et le contenu glisse vers l'intérieur et l'extérieur en suivant le geste. Afin d'obtenir l'effet 3D cette fois-ci, nous avons ajouté une couche de mi-plan sur la base de la superposition précédente et divisé le premier plan d'origine en premier plan et mi-plan.
Le sl_bg dans l'image ci-dessus est l'arrière-plan, pv_middle est le terrain d'entente et sl est le premier plan
En raison de l'interaction de commutation, la bannière utilise en fait deux téléavertisseurs pour la liaison. L'arrière-plan est dans le viewpager inférieur, et le milieu et le premier plan sont dans un autre viewpager.
déplacement du talon
Après avoir ouvert l'application Ziroomke, l'utilisateur peut clairement sentir la dislocation de l'écran lors de l'utilisation de l'appareil, ce qui entraîne un effet visuel de profondeur de champ. Ce type de mouvement de dislocation est en fait réalisé à l'aide du capteur de l'appareil lui-même.La méthode de mise en œuvre spécifique est que nous gardons la scène médiane immobile, et en même temps obtenons l'angle d'inclinaison correspondant à l'appareil actuel à partir du capteur de l'appareil , et calculez le mouvement de l'arrière-plan et du premier plan en fonction de l'angle d'inclinaison distance, puis effectuez l'action du mouvement de l'arrière-plan et du premier plan. Comme indiqué ci-dessous:
Pour la commodité d'utilisation, nous encapsulons un SensorLayout, qui est spécialement utilisé pour effectuer le déplacement du contenu en fonction de l'angle d'inclinaison de l'appareil ; la principale implémentation à l'intérieur du SensorLayout :
Enregistrez le capteur correspondant
mSensorManager = (SensorManager) getContext().getSystemService(Context.SENSOR_SERVICE);
// 重力传感器
mAcceleSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
// 地磁场传感器
mMagneticSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);
mSensorManager.registerListener(this, mAcceleSensor, SensorManager.SENSOR_DELAY_GAME);
mSensorManager.registerListener(this, mMagneticSensor, SensorManager.SENSOR_DELAY_GAME);
复制代码Calculer l'angle de déviation
if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
mAcceleValues = event.values;
}
if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) {
mMageneticValues = event.values;
}
float[] values = new float[3];
float[] R = new float[9];
SensorManager.getRotationMatrix(R, null, mAcceleValues, mMageneticValues);
SensorManager.getOrientation(R, values);
// x轴的偏转角度
values[1] = (float) Math.toDegrees(values[1]);
// y轴的偏转角度
values[2] = (float) Math.toDegrees(values[2]);
复制代码Obtenir l'angle de déviation de l'appareil à travers le capteur de gravité et le capteur de champ géomagnétique
Effectuer un glissement en fonction de l'angle de déviation
if (mDegreeY <= 0 && mDegreeY > mDegreeYMin) {
hasChangeX = true;
scrollX = (int) (mDegreeY / Math.abs(mDegreeYMin) * mXMoveDistance*mDirection);
} else if (mDegreeY > 0 && mDegreeY < mDegreeYMax) {
hasChangeX = true;
scrollX = (int) (mDegreeY / Math.abs(mDegreeYMax) * mXMoveDistance*mDirection);
}
if (mDegreeX <= 0 && mDegreeX > mDegreeXMin) {
hasChangeY = true;
scrollY = (int) (mDegreeX / Math.abs(mDegreeXMin) * mYMoveDistance*mDirection);
} else if (mDegreeX > 0 && mDegreeX < mDegreeXMax) {
hasChangeY = true;
scrollY = (int) (mDegreeX / Math.abs(mDegreeXMax) * mYMoveDistance*mDirection);
}
smoothScrollTo(hasChangeX ? scrollX : mScroller.getFinalX(), hasChangeY ? scrollY : mScroller.getFinalY());
复制代码mDegreeX est l'angle de déflexion obtenu dans la deuxième partie, mDegreeXMin et mDegreeXMax sont les valeurs maximale et minimale du déplacement de déflexion sur l'axe X, et mYMoveDistance est la distance de décalage maximale sur l'axe Y (rotation autour de l'axe X- l'axe, la vue sera Déplacement le long de l'axe Y); il en va de même pour la déviation sur l'axe Y; même après la distance de décalage entre l'axe X et l'axe Y, utilisez la molette pour faire glisser ;
Résumé de la mise en œuvre
Après avoir lu ceci, je pense que tout le monde a une compréhension de base de la mise en œuvre de cette bannière. Côté Android, la disposition est en couches, la position de la mi-vue reste inchangée, l'angle de déviation est obtenu à l'aide du capteur de gravité et du capteur de champ géomagnétique, et l'arrière-plan et l'avant-plan sont décalés en fonction de l'angle. Le principe d'implémentation du côté iOS est fondamentalement le même, et ne sera pas repris ici.
L'auteur de cet article : Huang Jin, Ziru Front-end R&D Center
Offres d'emplois
Le Centre de R&D Front-end de Ziru recrute de nouveaux étudiants !
Les ingénieurs FE/IOS/Android regardent par-dessus
Les avantages sociaux incluent :
- Cinq assurances complètes et un fonds de logement, et une assurance commerciale supplémentaire
- Gym gratuite + examen physique annuel
- 10% de réduction pour une location à proximité de l'entreprise
- 2 opportunités de promotion par an
Emplacement du bureau : Parc scientifique et technologique industriel de Putian, Jiuxianqiao, Pékin Bienvenue à vous qui avez une passion pour la technologie pour nous rejoindre ! Veuillez envoyer votre CV à [email protected] !