 Selamat tinggal! Selamat tinggal! Okey, saya bersedia. Maaf untuk awak. Jadi, ini saya lagi. Ini kali ketiga saya. Saya harap kalian tidak nampak saya di sini. Jadi, hari ini, apa yang saya akan berkongsi adalah saya melakukan projek ini dan minta saya buat sesuatu seperti saya tidak yakin berapa banyak dari kamu. Kamu pernah memakai Tinder? Kamu akan memakai? Macam mana? Apa? Tidak, tidak. Kamu akan mencoba atau apa-apa saja? Tidak. Okey, kamu berdua berbeza. Kamu berbeza. Ada sesiapa lagi? Memakai Tinder di sini? Tidak, tidak. Apa itu? Perniagaan kamu. Perniagaan kamu. Ini... Ini tempat untuk lelaki-lelaki-lelaki dan lelaki-lelaki lelaki-lelaki. Ya. Lelaki lelaki-lelaki. Ya. Jadi, untuk orang yang tidak pernah memakai Tinder, perkara yang baik tentang Tinder adalah mereka memperkenalkan pakaian pakaian yang digunakan sehingga kamu boleh membuat pilihan walaupun anda suka atau tidak suka. Sampai pakaian Facebook suka. Jadi, saya rasa ini adalah pakaian yang cukup baik untuk membuat pakaian pakaian. Pakaian ini juga berfikir mereka ingin membuat pakaian untuk pakaian pakaian. Jadi, saya tidak akan memperkenalkan. Jadi, kamu hanya tahu pakaian pakaian. Ya. Jadi, saya sedang melihat pakaian internet. Ada pakaian pakaian yang sebenarnya pakaian pakaian pakaian yang sebenarnya membuat pakaian untuk pakaian pakaian pakaian Tinder. Tetapi, tidak dari Tinder sendiri. Kamu boleh sebenarnya memperkenalkan pakaian sendiri, memperkenalkan secara manual. Tetapi, kamu akan perlu tahu sedikit pakaian pakaian. Jadi, tidak. Tidak. Biar saya teruskan ke dalam. Okey, jadi untuk pakaian ini yang saya lakukan adalah perasaan yang sangat mudah. Jadi, untuk hari ini, saya hanya membuat cara mudah untuk membuat pakaian. Jadi, saya hanya menginginkan perasaan log-in yang saya hanya mengatakan bahawa kamu perlu memperkenalkan pakaian. Dan ini di mana keadaan magik. Ini akan menjadi pakaian pakaian pakaian. Ini di mana saya akan memperkenalkan atau memperkenalkan. Untuk menunjukkan jika saya memperkenalkan atau memperkenalkan pakaian. Dan untuk pakaian saya, saya lebih suka memperkenalkan pakaian. Terutama, kemudian kemudian ada berita yang panjang pada pakaian Facebook. Atau jika kita harus membuat pakaian kode atau nip. Jadi, saya adalah orang yang memperkenalkan pakaian kode. Jadi, bagi saya, saya membuat pembuang pakaian untuk pembuang pakaian yang saya akan memilih, apakah saya suka atau tidak. Jadi, saya hanya memilih tersetujuk atau tidak. Terutama, saya memperkenalkan pakaian yang saya akan memilih untuk membuat pakaian kode. Jadi, jika saya akan memperkenalkan pakaian ini, saya akan memperkenalkan pakaian informasi tentang pakaian pakaian pakaian. Jadi, mari kita pergi ke pakaian. Sebelum kita pergi ke pakaian, biar saya tunjukkan bagaimana ia berfungsi. Jadi, saya akan mempunyai pakaian pakaian ini. Sebelumnya, saya hanya membuat pakaian kode untuk informasi yang ditutupkan di sini. Ia akan dibuat dengan berlainan. Jadi, jika saya memperkenalkan pakaian kode, saya akan memperkenalkan pakaian pakaian dan jika saya memperkenalkan pakaian pakaian, saya akan dapat memperkenalkan pakaian pakaian. Ada beberapa soalan yang orang minta saya, mereka menggunakan pakaian pakaian pakaian dan pakaian pakaian. Jika mereka menggunakan, mereka tak dapat memasangnya dengan kembali dan minta, ya, saya tidak fikir saya tak suka pakaian ini. Saya minta memasangnya dengan kembali. Jika hanya menggunakan pakaian pakaian dan pakaian pakaian pakaian, dia tidak akan dapat memasang deploy begini. Jadi, kita perlu pergi dan kemudian yang boleh dibuat dengan pen jasir pengalaman atau apa yang ia berlaku? pen jasir pengalaman ia adalah perang jasir pengalaman jadi anda akan dapat sesuatu yang dihubungi pada cara anda harus mencoba behavior ini jadi anda mahu mencoba ke kanan yang terlihat ia akan berlaku ke kanan yang terlihat ia akan berlaku ke kanan yang terlihat dan ini juga berlaku seperti yang dihubungi jadi anda akan ke kanan yang terlihat anda akan ke kanan yang terlihat jadi ia akan mudah seperti itu jadi mari kita masuk ke pen jasir jadi untuk pen jasir ini saya akan menyebut pen jasir perang jasir jadi apa yang akan saya lakukan adalah saya mempunyai pen jasir dan saya mempunyai pen jasir dan bila saya menyebutnya di dalam pen jasir saya hanya mencoba untuk pen jasir dan bagi pen jasir dari mana saya hanya luk justitut , dan saya dapat mengulinkanya dari dimana dalam sebuah badan dalam pen jasir jadi saya ada pen jasir dan saya ada jasir www.tapview jika saya platesake dalam jasir sesuatu esok untuk sekarang saya hanya zipper saya Cette untuk lock yang akan berada di sini Jadi, satu ini untuk belakang dan saya akan menambahkan sesuatu Kemudian yang berikutnya saya akan buat adalah penggambaran Jadi, tanpa menggunakan penggambaran tersebut saya menggunakan penggambaran tersebut tersebut tersebut tersebut Kenapa saya menggunakan penggambaran? Kerana kita dapat menggunakan peraturan yang berbeda Dan kodak jika digunakan untuk menggunakan cara yang kita nak Jadi, kodak saya tahu Apabila mereka menggunakan peraturan tersebut, mereka pasti menggunakan peraturan Kerana hal yang tersebut adalah lebih mudah dengan peraturan tersebut Anda dapat menggunakan peraturan tersebut atau yang berbeda Dan anda akan menggunakan peraturan tersebut untuk anda untuk anda tapi jika anda ingin menggunakan pen jashir, anda boleh juga lakukan kebebasan swiping dan jika anda ingin tahu swiping datang dari pen jashir jadi pen jashir kebebasan adalah percayaan swiping jashir kebebasan jadi kita boleh sebenarnya melakukan, kita boleh sebenarnya menggunakan swiping diri kita. Jadi dari itu untuk perubahan berbeda kita ada pen jashir begini, pen jashir berubah, pen jashir berakhir dan ini adalah 3 pen jashir pen jashir mungkin pen jashir dan pen jashir pen jashir mungkin adalah sebenarnya pen jashir jadi kita boleh hanya lakukan sesuatu seperti itu jadi tanpa mempunyai pen jashir di sini, kita boleh hanya menggunakan ini dengan ini ini akan berubah sebagai pen jashir juga. Kemudian kita ada dua pen jashir dan pen jashir ini adalah sebuah event di mana anda menghubungi data dari internet dan kemudian pen jashir dan anda ingin kembali ke posisi original jadi ini adalah tempat anda harus melakukan animasi, tetapi kali ini saya tidak lakukannya kerana saya tiada cara menunjukkan bagaimana pen jashir dan anda tahu kembali ke posisi original dan untuk pen jashir kita boleh sebenarnya tambah lagi, jadi mungkin katakan bahawa semasa kita memandu ke dalam atau semasa kita memandu ke dalam mungkin kita mempunyai satu lagi pen jashir untuk menggunakan dan kembali ke posisi original jadi ini akan kembali ke stet yang akan menjadi pen jashir yang akan menjadi pen jashir yang menggunakan stet mungkin jadi jika anda ingin menggunakan dan anda ingin menghargai dan anda ingin dan jika mereka berdua adalah sebuah kode yang sama kita boleh hanya memasukkan di sini dan ia akan mempunyai sebuah kode yang sama untuk dua stet jadi dalam kode ini apabila pertama, saya mengambil pen jashir original okey ini adalah saya menyebarkan ini sebab ini juga sebuah cara membuatnya tetapi saya rasa untuk ini apabila saya mempunyai pen jashir ini, saya rasa ini lebih jelas untuk menunjukkan jadi pen jashir begitulah saya dapat pen jashir original dan apabila ia mulai untuk memandu ke dalam dan apabila ia mulai untuk memandu ke dalam kita akan masuk ke stet ini, ini adalah di mana saya melakukan animasi ya jadi dari sini saya menyebarkan pen jashir, pen jashir angka dan kemudian saya menyebarkan kembali kenya okey, kembali kembali saya rasa saya boleh menyebarkan ini juga dan saya boleh buat sesuatu seperti itu ia harus berjalan dengan cara yang sama ya okey ini kode ini adalah di sana sebab saya boleh melakukan sedikit kembali apabila saya melakukan pen jashir jadi jika saya melakukan pen jashir atau pen jashir saya akan membuatnya lebih besar dan lebih besar jadi ia akan melihat lebih baik di deskripsi jadi untuk stet ini saya rasa saya hanya boleh menyebarkan itu kerana ini sebenarnya hanya sama jadi tidak ada perbezaan dalamnya jadi pen jashir angka yang saya lakukan adalah saya menggunakan fungsi minimum jadi jika ini lebih besar daripada ini pen jashir angka yang saya menyebarkan di sini pada 320 jadi oh maaf saya rasa saya harus mulakan dari awal okey, pertama saya dapat pen jashir angka pen jashir angka dalam pen jashir okey jadi ini adalah pen jashir ini adalah pen jashir jadi itu sebabnya tanpa hanya menggunakan pen jashir saya sebenarnya ingin mencari apa yang ada di pen jashir jadi dari sana saya dapat pen jashir angka jadi apa yang jashir angka bermaksud jadi jika ini adalah pen jashir jika saya akan menyebarkan di sini dan mulakan jadi ini adalah pen jashir saya akan mulakan dari awal ke jalan jadi ini adalah perbezaan okey, saya rasa ini sedang menyebarkan ia patut menjadi sesuatu seperti berapa banyak perubahan dari dari mana ia bermula ke mana ia menyebarkan jadi jika saya akan mulakan dari sini dan saya akan mulakan 5 piksu di sini ia akan sering berubah dalam cara negatif tetapi jika saya akan menyebarkan ke kanan ia akan berubah dalam cara positif okey jadi bagaimana untuk tahu bahawa saya membuat perubahan saya melihat jika saya membuat jika saya telah menghubungkan total 120 piksu jika ia adalah 120 piksu saya menghargai itu sebagai perubahan jadi sama untuk sisi lain lebih daripada 120 ia selesai jadi jika saya akan melakukan lebih daripada 120 ia akan berubah ini hanya untuk iPhone kan? untuk iPhone tapi aplikasi ini hanya untuk iPhone mempertanggungannya untuk iPad iPad juga? iPad tak masih secara yg kita juga belum memdesain untuk iPad ya tapi apakah vali yang kamu katakan atau yang kamu katakan? ah ya, kerana kali ini saya nak katakan Ya, about 120 is going to be something about 125 by 320 is going to be about 1 third. So as long as it translate 1 third to the left or 1 third to the right, I will consider it as right. Of course that value can change to what you find is interesting or whatever works for you. Ya, some prefer it half but I prefer it 1 third. Because if the person were to swipe it from here, it will never reach half or 1 third. So it will just go back. So I prefer 1 third. So that's how the X from center works. So the next thing I did is measure how much rotation I want. So the rotation max I set it to 1. So minimum means if this is larger than this, then the value taken will be this. But if this value is lower than this, then this value will be taken. So the rotation strength will be either from 0 to 1. And then for the rotation angle, I find rotation angle here which is the max pi divided by 8. Which is 180 divided by 8. 180 degrees divided by 8. And then times the rotation strength which is either 0 or 1. So if it's too small, I won't even make the rotation. But if the angle is large enough, then you can see the rotation happening. So that's how I did for the rotation. So after having all these values, I set the transform. Why I set the transform and not make the value change permanently is because I can do this if it fails. If it fails, I can just set the transform back to 0 and go back to normal. Without me doing any other calculation. So once I set the transform, instead of using the animation block because this is going to change every time I swipe. So this is considered like it steadily changes to the left or to the right. So it looks like an animation without the animation block. So once I lift up my finger, this is a state that it's going to go to, which is state ended. So when I lift my finger, I see if it's more than 120 to the right, it will be considered as light. And then if I go more than 120 to the left, it will be considered as I don't like it. And if it doesn't go over 120 on either side, I will animate it back to the center. So instead of calculating all this, I just set the transform back to 0 and go back to the original position. And the point is I get the original point from here, from where it began. So that's the original point and I want it to go back to the same point. So from there, so this is just some protocol method, term delegate method that I do so that the person light or the person dislike what will happen. Okay, this block of animation code inside my delegate class. Okay, I set this as tinder class as the delegate for the tinder single listing. So okay, the animation here, you can actually do it inside the single listing but yeah, actually there's nothing wrong with putting this into the single listing but I just make it as bad as possible so that it's just a matter of preference how you want to do it. So if I like it or dislike it, I'm just going to set the animation to left or to the right. If I want to make it rotate, I can also do it here but Well, let me just do it here and then I'm quite confused right now. So for this one, I think my animation is just to swipe to the left and to the right without the animation so it will look like this without the rotation but yeah, I can very better improve to include the rotation here as well. So yeah, basically that's it for how to do a tinder like UI for your app. So for this case, what I will be doing is that I will be loading 10 at one time then once the 10 finish, I will load another 10 but then again that is up to you guys how you all want to keep the data coming in. Some prefer one at a time, some prefer 10 at a time it doesn't really matter. So after after the 10 of it we just create an empty screen right now for me. So okay, that's all for my demo. Any questions? Any questions? Yeah. Yeah, it's kind of fast, right? So for the actual app, is this the same animation that you're following or you're doing something extra in the actual app? Okay, let me just we're also looking into swiping up and down. Yeah, I think that was I was thinking maybe it's better because when it's wired always kind of going on the screen it kind of gives you this 2D feeling. 2 what? It's like 2 dimensional feeling because you have already loaded the scars behind and it doesn't really give you so what if you can just transform the scaling property of the scars behind and as you swiped the scale of the scars so it's like that will give you the training. Yeah, so that's where the scale transform come in here actually. Okay, let me just show you. When it's swiping, the guard behind is already already there, right? It starts at 0.8 or 0.7 and it just like it pops up, right? Yeah, I'll tell you. Maybe let's just see if I can do a little bit of putting here. 1.2 Okay, this is I know what you mean, but I just want it will give the same effect. No. Just try it later. Yeah, maybe later. So, yeah, that's a good suggestion. We're definitely trying to make it look like 3D, like how Airbnb did it. Airbnb, I think when they transit from the menu to the main slide. Just like a slip bar, isn't it? Yeah, slip bar, yeah, but I found out you can actually do that with a third party library that's actually one of it on GitHub. So, yeah, then there's also this third party library called Carozelle. They on GitHub also. They have a few Carozelle few. Not the Carozelle app, but Carozelle few, they have a few pool transitioning staff as well. The cover floor, right? Yeah, they have this type of floor, the rotary floor, the inverted rotary cylinder. Yeah, but I think it's really good. I think, yeah. It doesn't really fit with the flat, isn't it? Yeah. I see. It gives you the skeo-morphic feel. But how about this, right? I think this is cool. Wonder the travel app. Oh, okay. Then, this one looks like the music app that was last time we swapped left, right? Yeah. So, Carozelle app and then the other one is Tinder app, you can just check. Honcheng is a library called Aprilflow from England. Honcheng, yeah, that was the, I think he did for his app, the bus app, yeah. He did a, which looks like a map, right? For the world or the flow sheet? I think it's paper flow. Paper flow? Ah, yeah, that's the one he used for his next bus, right? This is the one whereby when he swapped left or right, it looks like he's onboarding a map. So, yeah, I've checked this out as well. Yeah, I think it's quite good that he managed to do something like that. But, yeah, not many people know that he actually put it up here, though. Only, like, his friends knew about it. We checked the number of stars or four. I think we don't. 2000 stars, dude. It's really popular. Wow. When did you see the stars? 2000 stars, bro. Okay, I'm wrong. I think 2000 stars, bro. Let's go. But, yeah, the only app I see use this is Honcheng's app. So, I guess that's it for my talk. But you guys want to discuss about the GitHub stuff and all that. I guess feel free to find out more what we actually use. I think that's just one GitHub that they compact every support UI into I think it's we'll just check. Or what was it? The fancy transition animation. So this guy, he actually compact all the third party library. And if anybody wants to design a new app and they want to have some idea, they can definitely come here. It's an awesome iOS UI. And you can take a look at what are some of the third party libraries that you are able to use for your app. So I think it's really very useful. So definitely check it out and a lot of cool stuff. There's button, effects, notifications and alerts. Put all the way down. Setting up tutorial is also simple. So if anybody wants to have the rotation loading bar, you can also get it here. Animated refresh control. I think this is cool. Groupon use this right now at the moment. Animated get. Like doing something here. And this is the ping pong table. It's also quite cool. And this is the one that Airbnb is using right now. The reset menu. So if you scroll left to right, it's going to look like that. So, okay. That's all. Thank you.