Сначала я пытаюсь заставить его работать только с изображениями.
Я очень новичок в Unity и не очень хорош с C #. Я могу получить все источники медиа-файлов (изображений) в массив, но затем мне нужно преобразовать их в текстуру и разместить на RawImage -компонент. Я застрял в этой части.
blockquote>Вы ищете функцию
Texture2D.LoadImage
. Он преобразует байты изображения в Texture2D, тогда вы можете назначить Texture2D для RawImage.Вы должны задать новый вопрос о том, как сделать это с помощью видео. Это намного сложнее.
public RawImage rawImage; Texture2D[] textures = null; //Search for files DirectoryInfo dir = new DirectoryInfo(@"C:\medias"); string[] extensions = new[] { ".jpg", ".JPG", ".jpeg", ".JPEG", ".png", ".PNG", ".ogg", ".OGG" }; FileInfo[] info = dir.GetFiles().Where(f => extensions.Contains(f.Extension.ToLower())).ToArray(); //Init Array textures = new Texture2D[info.Length]; for (int i = 0; i < info.Length; i++) { MemoryStream dest = new MemoryStream(); //Read from each Image File using (Stream source = info[i].OpenRead()) { byte[] buffer = new byte[2048]; int bytesRead; while ((bytesRead = source.Read(buffer, 0, buffer.Length)) > 0) { dest.Write(buffer, 0, bytesRead); } } byte[] imageBytes = dest.ToArray(); //Create new Texture2D Texture2D tempTexture = new Texture2D(2, 2); //Load the Image Byte to Texture2D tempTexture.LoadImage(imageBytes); //Put the Texture2D to the Array textures[i] = tempTexture; } //Load to Rawmage? rawImage.texture = textures[0];
Вы можете использовать метод animate
:
$('#element').animate({width: 'toggle'});
Если вам нужно, чтобы он был непрерывным, вы можете настроить setTimeinterval следующим образом
<?php
setInterval(function (){
$('div').animate({width: 'toggle'});
},200);
?>
Создал скрипку http://jsfiddle.net/powtac/RqWk2/
$("div").animate({width: 'toggle'});
Я хотел, чтобы высота переключалась, поэтому я использовал (я использовал в своем проекте)
function show_hide(target){
var x = document.querySelectorAll("." +target);
var y = $( x ).next()
$(y).animate({height: 'toggle'});
}
Если вы хотите переключиться между двумя ширинами, вы можете сделать что-то вроде ниже:
$('#A').click(function(){
if($(this).width() > 20){
$(this).animate({width: '20px'})
}
else{
$(this).animate({width: '50%'})
}
});
#A{
float:left;
width:50%;
height:300px;
background:red;
}
#B{
min-height:300px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
</div>
<div id="B">
<span>Some stuff</span>
</div>
Я пробовал это и отлично работал!
html-код:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
CSS / * перевернуть панель при зависании * / .flip-container: hover .flipper , .flip-container.hover .flipper {transform: rotateY (180deg); }
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Я использую это внутри бутстрапа col-sm- * и отлично работает
<div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="content-box flipper">
<div class="content-box-front">
<span class="glyphicon glyphicon-envelope content-box-icon"></span>
<h4>Share your emotions</h4>
</div>
<div class="content-box-back">
<p>Share emotions with friends, family and teammates.</p>
<button>Read more</button>
</div>
</div>
</div>
css
.content-box
{
position: relative;
text-align: center;
height: 105px;
width: 100%;
}
.content-box-icon
{
font-size: 30px;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
text-align: center;
display: block;
margin: 5px auto 15px auto;
color: #fff;
float: none;
background:#25acfd
}
.content-box-front
{
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 105px;
}
.content-box-back
{
transform: rotateY(180deg);
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 105px;
}
/* entire container, keeps perspective */
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
Существует другой способ использования jquery ui. См. api jquery ui , но он может быть не всегда полезным, поскольку он имеет свои сбои
Здесь jsfiddle , чтобы увидеть сбой, он не перемещает все элементы отдыха плавно. Я поставил здесь код, но его следует использовать с jQuery UI 1.10.3.
js
$( document ).click(function() {
$( "#toggle" ).toggle('slide');
});
css
.t {
width: 100px;
height: 100px;
background: #ccc;
display: inline-block;
float: left;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>Click anywhere to toggle the box.</p>
<div id="toggle" class='t'>1</div>
<div id="" class='t'>2</div>
<div class='t'>3</div>